jQuery droppable - 在给定位置触发给定元素的拖放答案

【问题标题】：jQuery droppable - Trigger drop for given element at given positionjQuery droppable - 在给定位置触发给定元素的拖放
【发布时间】：2014-05-27 06:47:37
【问题描述】：

您将如何动态创建 div 并将其放入可放置的 div 中？

这是实际的代码。

   <head>
   <meta charset="utf-8">
   <title>jQuery UI Droppable - Default functionality</title>
   <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
   <script src="//code.jquery.com/jquery-1.10.2.js"></script>
   <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
   <link rel="stylesheet" href="/resources/demos/style.css">
   <style>
      #draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
      #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
   </style>
   <script>
      $(function() {
      $( "#draggable" ).draggable();
      $( "#droppable" ).droppable({
        drop: function( event, ui ) {
        $( this )
          .addClass( "ui-state-highlight" )
          .find( "p" )
          .html( "Dropped!" );
        }
      });
      });
   </script>
</head>
<body>
   <div id="draggable" class="ui-widget-content">
      <p>Drag me to my target</p>
   </div>
   <div id="droppable" class="ui-widget-header">
      <p>Drop here</p>
   </div>
</body>

现在我正在创建一个新元素

$("body").append("<div id='custom_1'></div>")
$("#custom_1").draggable()

如何以编程方式将#custom_1 放到给定位置的#droppable 中？

我尝试过类似的方法，但没有运气

$("#droppable").trigger('drop',$('custom_1'))

注意：

我想触发事件（这样我就可以获得他们的参数event 和ui），而不是要求它只执行drop 事件中的代码。

【问题讨论】：

标签： jquery jquery-ui jquery-ui-droppable

【解决方案1】：

无需重写事件链即可使用jQuery.simulate plugin。它由 jQuery UI 开发团队用于 jQuery UI 单元测试。

代码：

$(function () {
    $("#draggable").draggable();
    $("#droppable").droppable({
        drop: function (event, ui) {
            $(this)
                .addClass("ui-state-highlight")
                .find("p")
                .html("Dropped!");
        }
    });

    $("body").append("<div id='custom_1' class='ui-widget-content'>demo</div>");
    $("#custom_1").draggable();
    var destination = $('#droppable').offset();

    $("#custom_1").simulate("drag", {
        dx: -destination.left + 50, // move to this x
        dy: -destination.top + 20, // move to this y
        speed: 5000 // set speed
    });
});

演示：http://jsfiddle.net/IrvinDominin/ALcC4/

【讨论】：