jQuery拖放模拟插件(jQuery Drag & Drop Simulate Plugin)

 提前谢谢你看看这个！ 我无法通过此处的扩展插件模拟jQuery UI提供的拖放功能： 
 
 https://github.com/j-ulrich/jquery-simulate-ext/blob/master/doc/drag-n-drop.md 
 
 该文档使用我修改的以下内容来满足我的需求： 
 
$('#draggableDiv').simulate("drag", {dragTarget: otherDiv});

Changed to this:
$('#placeme').simulate("drag", {dragTarget: $("#page1")});
 
 我的警报消息永远不会弹出，因此很明显drop函数永远不会被触发，我不知道为什么。 手动将对象拖动到page1正常运行。 
 
 JSFiddle： http ： //jsfiddle.net/d2fdvxhz/8/ 
 
 HTML： 
 
<div class="container">
    <div id="view-port">
        <div id="placeme" class="droppableShape">
            <img src="https://upload.wikimedia.org/wikipedia/en/6/6f/Smiley_Face.png" width="25" height="25" />
        </div>
        <button id="testme">Simulate Drop</button>
        <div class="page" id="page1" style="background-image: url(http://images.huffingtonpost.com/2012-08-15-1CanvasPanelInstall5psd.jpg);"></div>
        <!-- Pages Here -->
    </div>
</div>
 
 JS： 
 
$(document).ready(function(){
     $(".droppableShape").draggable({
            helper:'clone'
     });

    $(".page").droppable({
        accept: ".droppableShape",
        tolerance: 'fit',
        drop: function(event,ui){
            alert("Drop Detected");

            var new_field = $(ui.helper).clone().removeClass('droppableShape');
            var droppable_page = $(this);
            var droppableOffset = $(this).offset();
            new_field.css('top', ui.position.top - droppableOffset.top);
            new_field.css('left', ui.position.left - droppableOffset.left);

            // Set Draggable Options
            new_field.draggable({
                containment: droppable_page,
                stop: function(event, ui) {
                    // Save position after dragging stops
                    $(this).data("x_cord", ui.position.left);
                    $(this).data("y_cord", ui.position.top);
                    $(this).draggable( "disable" );
                }
            });

            // Add to drop area
            $(this).append(new_field);
        }
    });

    $( "#testme" ).click(function() {
        $('#placeme').simulate("drag", {
            dragTarget: $("#page1")
        });
        console.log("Simulate Attempted");
    });
});

Thank you in advance for taking a look at this! I am having trouble simulating the drag & drop feature provided by jQuery UI via the extended plugin found here:
 
https://github.com/j-ulrich/jquery-simulate-ext/blob/master/doc/drag-n-drop.md
 
The documentation uses the following to which I modified to suite my needs:
 
$('#draggableDiv').simulate("drag", {dragTarget: otherDiv});

Changed to this:
$('#placeme').simulate("drag", {dragTarget: $("#page1")});
 
My alert message never pops up, therefore it is evident that the drop function is never fired, I'm not sure why. Manually dragging the object to page1 behaves normally.
 
JSFiddle: http://jsfiddle.net/d2fdvxhz/8/
 
HTML:
 
<div class="container">
    <div id="view-port">
        <div id="placeme" class="droppableShape">
            <img src="https://upload.wikimedia.org/wikipedia/en/6/6f/Smiley_Face.png" width="25" height="25" />
        </div>
        <button id="testme">Simulate Drop</button>
        <div class="page" id="page1" style="background-image: url(http://images.huffingtonpost.com/2012-08-15-1CanvasPanelInstall5psd.jpg);"></div>
        <!-- Pages Here -->
    </div>
</div>
 
JS:
 
$(document).ready(function(){
     $(".droppableShape").draggable({
            helper:'clone'
     });

    $(".page").droppable({
        accept: ".droppableShape",
        tolerance: 'fit',
        drop: function(event,ui){
            alert("Drop Detected");

            var new_field = $(ui.helper).clone().removeClass('droppableShape');
            var droppable_page = $(this);
            var droppableOffset = $(this).offset();
            new_field.css('top', ui.position.top - droppableOffset.top);
            new_field.css('left', ui.position.left - droppableOffset.left);

            // Set Draggable Options
            new_field.draggable({
                containment: droppable_page,
                stop: function(event, ui) {
                    // Save position after dragging stops
                    $(this).data("x_cord", ui.position.left);
                    $(this).data("y_cord", ui.position.top);
                    $(this).draggable( "disable" );
                }
            });

            // Add to drop area
            $(this).append(new_field);
        }
    });

    $( "#testme" ).click(function() {
        $('#placeme').simulate("drag", {
            dragTarget: $("#page1")
        });
        console.log("Simulate Attempted");
    });
});

原文：https://stackoverflow.com/questions/32892083