jQuery – 在可排序列表中操作被删除的元素

我有一个可拖动列表（.field），您可以将项目拖放到可排序列表（.sortlist）中。 我是这样做的，因为我不希望主列表（.field）以任何方式改变。 它工作正常，除了我无法弄清楚如何操作可排序列表中的删除字段。

我可以通过在droppable（）中的’drop：’函数中使用以下函数从可拖动到可放置区域中执行此操作：

$(this).append('html code here to change content of dragged field'); 

但是这在sortable（）中不起作用。 我的代码如下所示：

 $(".sortlist").sortable({ receive: function(event, ui) { var dropElemTxt = $(ui.item).text(); var dropElemId = $(ui.item).attr('id'); $(ui.item).replaceWith('
Updated field! '+dropElemTxt+'
'); } }); 

$（ui.item）.replaceWith更改正在拖动的主字段，因此这不起作用。 我尝试了$（this）.replaceWith，但是更新了可排序区域（.sortlist）。

知道我需要什么代码来引用被拖动的项目吗？

非常感谢，阿里。

Answer 1

您可以在beforeStop事件中获取拖动的项目：

 beforeStop: function (event, ui) { draggedItem = ui.item;}, receive: function (event, ui) { /* use draggedItem here*/ } 

使用beforeStop事件代替接收对我来说已经足够了：

 beforeStop: function(event, ui) { var myClassItem = $('.myClass', ui.item); myClassItem.bind('click', function(){ /*my function*/ }); } 

Answer 2

我想我已经解决了。 有点hacky，但似乎工作！

我需要使用$（’。sortlist li：last’）来访问被拖动的元素…

Answer 3

我遵循了你的思路，但是有一些错误使用这种方法（有时候使用droppable + sortable时丢弃的元素就消失了）。 这对我来说很有用：

 $(".draglist").draggable({ start: function(e, ui) { draggedItem = ui.item; } }); $(".sortlist").sortable({ receive: function(event, ui) { //do something with the 'draggedItem' here... var droppedElemTxt = draggedItem.text(); var droppedElemId = draggedItem.attr('id'); } , start: function(e, ui) { draggedItem = ui.item; } }); 

Answer 4

无法访问被删除的元素是JQuery ui sortables中的一个已知错误。 该票证包含一个允许您访问已删除元素的补丁，预计将在下一个主要版本中修复。

Answer 5

我想我实际上想出了一个更好的解决方案……到目前为止似乎工作…

我将droppable附加到sortable以声明拖动项的全局变量。 有点像这样：

 $(".sortlist").droppable({ drop: function(e, ui) { draggedItem = ui.draggable; } }).sortable({ receive: function(event, ui) { //do something with the 'draggedItem' here... var droppedElemTxt = draggedItem.text(); var droppedElemId = draggedItem.attr('id'); } });