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

我想我已經解決了。 有點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');
  }
});