Trigger Mouse Drag and Drop to jQuery UI

Question

Using jQuery 1.2.x and jQuery UI 1.5.x, one of them was able to trigger the drag manually:

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 applies 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>

This was a convenient way to apply drag and drop to items inside a container in which its children dynamically changed. I like to call it a drag and drop delegation.

However, with the release of jQuery 1.3.x and jQuery 1.6+, the script add-in stopped working. Using jQuery 1.3.2 and jQuery UI 1.7.1 returns a "too much recursion" error.

How can I trigger a drag manually? Any suggestions?

Answer 1

, . .trigger(), , , .

, :

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

UI ....

, jQuery 1.4.2 jQuery UI 1.7.2

Answer 2

.

$('.nonDraggableObjectWhichTriggersDrag').mousedown(function(e) {
   $('.draggableObject').trigger(e);
});

Answer 3

, jQuery 1.4 (, , delegate()), .

, , , stopPropagate() mousedown :

$('drag-me').mousedown(function(ev){
  ev.stopPropagation();
});

( stopPropagation() ):

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]);
        ev.stopPropagation()
    }
});

. ( , )

Answer 4

( html script ), , , , / ....

, 1 [ev] .

: ", . jQuery.Event. , ."

, ( ), /, , URL- ? .

, .:)

: . , . mousedown -, , mousedown, , ... ...

.

divs , ? ?

, - , . , , , "", mousedown, mousemove mouse up. . !

Answer 5

, jquery ui simulate plugin

https://github.com/jquery/jquery-ui/blob/9e8e339648901899827a58e5bf919f7dda03b88e/tests/jquery.simulate.js

$("#myElement").simulate('drag');