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

Question

我正在努力寻找将对象 jQuery UI droppable 插入到目标 div 中的正确方法。

我一直在玩停止，但我不知道如何更改项目的 html。

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

我正在使用可拖动的可排序并将其连接到可排序的连接。

我正在使用 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);
  }
});