以编程方式将元素拖放到另一个元素上答案

【问题标题】：Programmatically drag and drop element onto another element以编程方式将元素拖放到另一个元素上
【发布时间】：2013-05-26 17:40:49
【问题描述】：

使用 jQuery UI，是否可以使用 javascript 执行拖放操作？

Example。单击链接后，将#pony 拖放到#box 中。我试过触发拖动事件，但这似乎不起作用:)

$('#pony').trigger('drag', [$('#box')]);

【问题讨论】：

标签： javascript jquery jquery-ui draggable droppable

【解决方案1】：

这就是 jQuery UI 团队以编程方式触发drop 事件的方式。

droppable_events.js:

draggable = $( "#draggable1" ).draggable(),
droppable1 = $( "#droppable1" ).droppable( config ),
droppable2 = $( "#droppable2" ).droppable( config ),

droppableOffset = droppable1.offset(),
draggableOffset = draggable.offset(),
dx = droppableOffset.left - draggableOffset.left,
dy = droppableOffset.top - draggableOffset.top;

draggable.simulate( "drag", {
    dx: dx,
    dy: dy
});

simulate 函数在jquery.simulate.js 中定义。简单来说，就是将draggable移动到droppable上，触发drop事件。

总而言之，我们有以下 sn-p。干杯。

$(function() {
  $("#draggable").draggable();
  $("#droppable").droppable({
    drop: function(event, ui) {
      console.log(event, ui);
      alert('dropped!');
    }
  });
});

function trigger_drop() {
  var draggable = $("#draggable").draggable(),
    droppable = $("#droppable").droppable(),

    droppableOffset = droppable.offset(),
    draggableOffset = draggable.offset(),
    dx = droppableOffset.left - draggableOffset.left,
    dy = droppableOffset.top - draggableOffset.top;

  draggable.simulate("drag", {
    dx: dx,
    dy: dy
  });
}

#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;
}
br {
  clear: both;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>

<script src="https://rawgit.com/jquery/jquery-ui/1-11-stable/external/jquery-simulate/jquery.simulate.js"></script>


<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>
<br>
<button onclick="trigger_drop()">trigger drop event</button>

【讨论】：

【解决方案2】：

如果您想触发与实际通过鼠标拖放对象时发生的功能相同的功能，您可以将拖放脚本封装到一个函数中，然后您也可以在其他地方简单地调用该函数。
如果您想让您的项目以动画方式被拖放，您应该 .stop().animate({}) 将其移动到目标位置，然后执行上述步骤。
如果您只是想将其附加到放置目标，只需.appendTo($('#yourtargetid'));。

很抱歉，如果我有任何误解，我的声望点不足以像我在其他地方所做的那样事先问你。

【讨论】：