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)。
任何想法我需要什么代码引用被拖动的项目?
非常感谢, 阿里。
我想我已经完成了它。有点哈克,但似乎工作!
我需要使用$(“sortlist中李:最后”)来访问拖动的元素...
我觉得其实我有更好的解决办法想出了......似乎工作至今..
我附加了一个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');
}
});
我跟着你的思路,但也有使用这种方法(有时元素被丢弃利用可放开+排序时就消失了)一些错误。这里的东西,制定了我:
$(".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;
}
});
你可以得到拖动项目在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*/ });
}
这也适用于我,谢谢。我知道已知的错误(在下面的帖子中提到),但它仍然令我头疼。通过设置beforeStop事件中的项目,我不得不惹恼接收事件中完全避免该错误的项目。 – azzy81 2013-11-25 11:10:33
*几年后* – Petah 2014-12-08 09:54:46