Question

Using jQuery 1.2.x and jQuery UI 1.5.x, one was able to trigger dragging manually like so:

jQuery("#myDiv").mousedown(function(ev) {
target = jQuery(ev.target);
if (target.hasClass("drag-me")) {
    target.draggable({
        helper: "clone",
        start: function()
        {
            console.log("drag start");
        },
        stop: function()
        {
            jQuery(this).draggable("destroy");
        }
    }).trigger("mousedown.draggable", [ev]);
} });

It is applied to the following HTML:

<div id="myDiv">
<div class="drag-me"></div>
<div class="drag-me"></div>
<div class="drag-me"></div>
<div class="drag-me"></div>
<div class="drag-me"></div>
<div class="drag-me"></div>
<div class="drag-me"></div>
</div>

It was a handy way to apply dragging to elements inside a container that has its children changed dynamically. I like to call it “drag delegation”.

However with the release of jQuery 1.3.x & jQuery 1.6+, the script above stopped working. Using jQuery 1.3.2 & jQuery UI 1.7.1 returns an error “too much recursion”.

How can I trigger dragging manually? Any suggestions?

Answer 1

It turns out to be much simpler than you’d expect. Looking at the .trigger() method’s documentation, no mention is made to the fact that one can also supply the original event as an argument and not just a string representation of the event type.

Thus one can achieve delegated dragging more efficiently like so:

$("ul#dynamiclist").delegate("li", "mousedown", function(event) {
    $(this).draggable({
            helper: "clone",
            cursorAt: { left: 5, top: -5 },
            cursor: "move",
            stop: function() {
                    $(this).draggable("destroy");
            }
    }); });

The ideal solution would have been for the UI library to have some method to perform this type of delegation natively for dynamic elements….

Note that this is applicable to jQuery 1.4.2 & jQuery UI 1.7.2