jQuery - 操纵可排序列表中的丢弃元素

我有一个可拖动列表（.field），您可以在其中拖放&删除项目到可排序列表（.sortlist）中。我这样做是因为我不希望主列表（.field）以任何方式改变。它工作正常，除了我不能解决如何操纵可排序列表中的拖放字段。jQuery - 操纵可排序列表中的丢弃元素

我可以用一个函数下面从一个可拖动做它变成一个可投放区域“下拉：”在投掷的（）：

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

然而，这并不内部的排序工作（）。我的代码如下所示：

$(".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）。

任何想法我需要什么代码引用被拖动的项目？

非常感谢，阿里。

来源

2010-01-19 WastedSpace

我想我已经完成了它。有点哈克，但似乎工作！

我需要使用$（“sortlist中李：最后”）来访问拖动的元素...

来源

2010-01-20 16:29:18 WastedSpace

我觉得其实我有更好的解决办法想出了......似乎工作至今..

我附加了一个droppable到一个可排序来声明拖动项的全局变量。像这样有点：

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

来源

2010-02-05 11:25:49 WastedSpace

我跟着你的思路，但也有使用这种方法（有时元素被丢弃利用可放开+排序时就消失了）一些错误。这里的东西，制定了我：

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

来源

2010-03-14 07:07:06

不能够进入下降元素是known bug in JQuery ui sortables.该票据包含一个补丁，允许您访问下降元素，而这预计将固定在未来主要发布。

来源

2010-10-02 06:37:50

*几年后* – Petah 2014-12-08 09:54:46

你可以得到拖动项目在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*/ }); 
    }

来源

2011-01-19 09:55:57 Svetlana

这也适用于我，谢谢。我知道已知的错误（在下面的帖子中提到），但它仍然令我头疼。通过设置beforeStop事件中的项目，我不得不惹恼接收事件中完全避免该错误的项目。 – azzy81 2013-11-25 11:10:33

jQuery - 操纵可排序列表中的丢弃元素

回答

相关问题