How to run drag-and-drop behavior programmatically

Question

I created a “2d slider” in jQuery in which two parameters are processed simultaneously by dragging the “handle” into the bounding box.

I implemented this by nesting the div handle in the parent div and using the jQuery UI plugin to facilitate drag and drop behavior. The html looks like this:

<div class="Slider2d" id="grid_spacing_both"> <div class="Slider2dHandle" id="grid_spacing_both_handle"></div> </div> 

jQuery looks like this:

 $(".Slider2dHandle").draggable({ containment: "parent", scroll: false, drag: function(event, ui) { // calculates position and updates value input boxes } }); 

I also created some code that permutes the handle to the location of any clicks in the parent div:

 $(".Slider2d").mousedown(function(event){ // get location of click and reposition handle to click location }); 

What I would like to do is change the method described above so that the user can click somewhere in the parent div, move the handle to the click location and start dragging the handle without allowing the mouse button. Basically, I need to figure out a way to programmatically launch the drag and drop function.

I found several suggestions here and here , and tried to implement their recommendations by modifying the above like this:

 $(".Slider2d").mousedown(function(event){ // get location of click and reposition handle to click location handle = $(".Slider2d").children(".Slider2dHandle"); handle.trigger(event); }); 

This works in the most technical sense, but its very slow, and I get a bunch of error messages from Safari telling me: "RangeError: Maximum call stack size." What I think is happening is that when I fire the event on the handle, it bubbles up to the parent, which then calls the trigger again and so on and so forth. I tried to stop the bubble by throwing the .stopPropagation event into my code before and after calling .trigger (), but to no avail.

So, if anyone has any suggestions on how to get this job, I would really appreciate it. I have a backup plan here , but it seems to me unnecessarily complicated.

Thanks!

Answer 1

I have succeeded. As I suspected, this had something to do with event handling.

The fix was simple: I modified the code above to check if the purpose of the event was the same as the element to which the callback was attached (i.e. the bounding box of the slider). At the initial click, which repositions the handle, these are the same elements. However, when the mouseedown handle event is fired and the event bubbles to a bounding box, the purpose of this event is to handle the slider. Thus, they do not match, and the trigger event is not called again, setting up an infinite loop.

At least I think what is happening. Anyway, here is the code that worked:

 $(".Slider2d").mousedown(function(event){ // get location of click and reposition handle to click location handle = $(".Slider2d").children(".Slider2dHandle"); if ($(this).attr("id") == $(event.target).attr("id")) { handle.trigger(event); } }); 

Answer 2

Or you could just stop distributing the handler in the mousedown event so that it doesn't fall into the mysedown event of the slider.

 $(".Slider2d").mousedown(function(event) { // get location of click and reposition handle to click location handle = $(".Slider2d").children(".Slider2dHandle"); handle.trigger(event); }); $(".Slider2dHandle").mousedown(function(event) { event.stopPropagation(); }); 

Answer 3

This does not work for me, so I assume that I am doing something wrong. But I was wondering if this worked for you, why not install:

 if ($(this).attr("id") == $(event.target).attr("id")) 

For this:

 if (this === event.target) 

I will clarify as soon as I find out.

Still nothing: during this endless loop, event.target remains as a slider, not a descriptor, only then is this the second event that actually fires.

EDIT: Got this, I switched from jQuery 1.7.1 to 1.6.4 and it works.