jQuery -操作可排序列表中已删除的元素

Question

我有一个拖拽列表(.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('<li class="box" id="'+dropElemId+'">Updated field! '+dropElemTxt+'</li>');
  }
});

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

我想我已经想好了。有点老生常谈，但似乎很管用！

我需要使用$('.sortlist li:last')来访问被拖动的元素...

Answer 3

我遵循了你的思路，但是使用这种方法有一些but (有时在使用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;
  }
});