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

无法访问被删除的元素是known bug in 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');
  }
});

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

5 个答案: