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

Posted 2023-03-11

【中文标题】jQuery - 在可排序列表中操作删除的元素

【英文标题】：jQuery - manipulate dropped element in sortable list

【发布时间】：2011-01-06 22:20:32

【问题描述】：

我有一个可拖动列表 (.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)。

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

非常感谢， 阿里。

【参考方案1】：

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

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

使用 beforeStop 事件而不是 receive 对我来说已经足够了：

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

【讨论】：

这也对我有用，谢谢。我知道已知的错误（在下面的帖子中提到），但它仍然让我头疼。通过在 beforeStop 事件中设置项目，我不必在接收事件中弄乱项目，从而完全避免了该错误。

【参考方案2】：

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

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

【参考方案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;
  
);

【参考方案4】：

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

【讨论】：

几年后

【参考方案5】：

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

我将 droppable 附加到 sortable 以声明拖动项目的全局 var。有点像：

$(".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');
  
);