我正在尝试为 jQueryUI 编写一个 helper
函数,以设置从“可拖动”列表拖动到“可排序”列表的项目的属性。 (我需要这样做的原因是最新版本的 jQueryUI 删除了删除项目的 'id' 属性)
但是该属性并未进入“可排序”列表。我在辅助函数中做错了什么吗?
$("#draggable > li").draggable({
connectToSortable: "#sortable",
helper: function (event) {
var id = $(this).attr('id');
var ret = $(this).clone();
ret.attr('dragId', id);
console.log('dragId: ', ret.attr('dragId'));
return ret();
}
});
$( "#sortable" ).sortable({
start: function( event, ui ) {
console.log( "sortable start: dragId=", ui.item.attr( "dragId" ) );
},
stop: function( event, ui ) {
console.log( "sortable stop: dragId=", ui.item.attr( "dragId" ) );
}
});
当我将项目从可拖动列表拖动到可排序列表时,它会在控制台中打印:
dragId: itemA
sortable start: dragId= undefined
sortable stop: dragId= undefined
我希望它打印:
dragId: itemA
sortable start: dragId= itemA
sortable stop: dragId= itemA
Here是 JsBin 上的完整示例(带有 HTML)
最佳答案
您正在设置 dragId
helper 元素上的属性,因此您应该使用 ui.helper
而不是ui.item
:
console.log("sortable start: dragId=", ui.helper.attr("dragId"));
编辑: Nicola Peluchetti 在下面的评论中是正确的:ui.helper
确实是null
期间stop
事件。因为您可能想使用 dragId
属性,解决方法是在 start
期间复制该属性。事件,当两者 ui.helper
和ui.item
可用:
$("#sortable").sortable({
start: function(event, ui) {
ui.item.attr("dragId", ui.helper.attr("dragId"));
console.log("sortable start: dragId=", ui.item.attr("dragId"));
},
stop: function(event, ui) {
console.log("sortable stop: dragId=", ui.item.attr("dragId"));
}
});
关于jquery - jQuery 中的辅助函数 - 可拖动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6752958/