jQuery droppable-给定元素在给定位置的触发器放置_Jquery_Jquery Ui_Jquery Ui Droppable

jQuery droppable-给定元素在给定位置的触发器放置

jquery jquery-ui

jQuery droppable-给定元素在给定位置的触发器放置,jquery,jquery-ui,jquery-ui-droppable,Jquery,Jquery Ui,Jquery Ui Droppable,如何动态创建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">

如何动态创建

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>

注意：

我想触发事件（这样我就可以得到它们的参数

事件

和

用户界面

），而不是要求它只在

事件中执行代码
 无需重写您可以使用的事件链。它由jQueryUI开发团队用于jQueryUI单元测试
代码：
$（函数（）{
$（“#可拖动”）.draggable（）；
$（“#可拖放”）。可拖放({
drop：函数（事件、用户界面）{
$（本）
.addClass（“ui状态突出显示”）
.查找（“p”）
.html（“已删除！”）；
}
});
$（“正文”）。附加（“演示”）；
$（“#自定义_1”）.draggable（）；
var destination=$（“#可拖放”）.offset（）；
$（“#自定义_1”）。模拟（“拖动”{
dx:-destination.left+50，//移动到此x
dy:-destination.top+20，//移动到此y
速度：5000//设定速度
});
});

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

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

$(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
    });
});