Question

I have markup like this

<div id="colorpicker-background">
  <div id="colorpicker-selector"></div>
</div>

With JS like this:

$('#colorpicker-selector').draggable({
  containment : $('#colorpicker-background'),
  handle      : $('#colorpicker-selector')
})

When the user onmousedown fires on #colorpicker-background I move #colorpicker-selector to where the mousedown is. The problem is, the user can’t continue to drag even though the selector is now under the cursor.

I have tried triggering drag, dragstart, mousedown, mousedown.draggable on #colorpicker-selector based on all sorts of posts I’ve read and am having no luck.

Another user here has had the same problem, but it’s from 6 months ago, with no answer, and different jQuery versions ( as there have been many updates since then ): jquery start dragging object when clicked on the other

Answer 1

On mousedown I bind the function updateSelector

updateSelector = function( e ) {

 // update position yada yada...

 $('#colorpicker-selector').trigger( e ); // make the dragging happen

}