Question

我正在努力找到将jQuery UI droppable对象更改为目标div的正确方法。

我一直在玩停止，但我无法弄清楚如何更改项目的HTML。

我正在拖动这是一个复杂的html片段，我需要将它的ID发送到工厂函数并使用接收的对象进行实际插入而不是拖放对象。

我正在使用draggable with sortable并将它连接到可排序的连接。

我正在使用jQuery 1.8.3和jQuery UI 1.9.2。

谢谢！

以下是我的代码：

$(".class").on("dragstop", function (event, ui) {
    var id= ui.helper[0].id;


    var o = $(snippetFactory(id));
   //  I Want "o" to be inserted instead of the object dragged.


});

Answer 1

您可以使用

var id= ui.helper[0].id;
var o = $(snippetFactory(id));
ui.item.replaceWith(o);

Answer 2

sortable中的事件receive是您的朋友（http://api.jqueryui.com/sortable/#event-receive）

ui.item指的是可拖动的源对象。
ui.helper为您提供已删除的对象

所以你可以做到

$(".selector").sortable({
  receive: function(event, ui) {
    var id= ui.helper[0].id;
    var o = $(snippetFactory(id));
    $(ui.helper[0]).replaceWith(o);
  }
});

jQueryUI Draggable如何动态更改插入到可排序的对象

2 个答案: