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

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

例子 。 单击链接后，拖动#pony并将其放入#box 。 我试过触发拖动事件，但这似乎不起作用:)

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

Answer 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事件。

总而言之，我们有以下代码段。 干杯。

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

     
 
Drag me to my target
 
 
 
Drop here
 
 
 trigger drop event 

Answer 2

• 如果要激发实际上通过鼠标拖放对象时发生的相同function，可以将drop脚本封装到一个函数中，然后您也可以在其他地方调用它。

• 如果你想要拖动项目的动画动作，你应该.stop().animate({})它到目标位置，然后是上面的步骤。

• 如果你只想将它附加到放置目标，只需.appendTo($('#yourtargetid')); 。

对不起，如果我不理解任何事情，我的声誉就不足以事先问你，就像我在其他地方所做的一样。