Question

您如何动态创建div并将其放入droppable 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事件中执行代码。

Answer 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/

jQuery droppable - 给定位置的给定元素的触发器下拉

1 个答案: