我想将可拖动项目添加到可排序列表中,这在我的 http://jsbin.com/ipese5/35 示例中运行良好
问题是我想在拖动到可排序列表时更新克隆项目的 id。 奇怪的是,下面的代码将 de ui 对象中的 id 更新为“new-id”(正如我在控制台中看到的那样),但实际页面 html 上的 id 没有更改。大家有解决办法吗?
$( "#init .block" ).draggable({
helper: "clone",
connectToSortable: ".list"
});
$(".list").sortable({
connectWith: ".list",
receive: function(event, ui) {
$(ui.helper).attr("id","new-id");
console.log(ui);
// surprisingly the next line works fine, but is not neccesary
// $(ui.item).attr("id","new-id");
}
});
<div id="init">
<div id="new" class="block">Drag me</div>
<div id="new" class="block">Drag me</div>
<div id="new" class="block">Drag me</div>
</div>
<div class="list">
<div class="block">Sort me</div>
<div class="block">Sort me</div>
</div>
最佳答案
在 receive
事件中,您无法访问在可排序列表中创建的实际项目。 Helper 指向仅用于拖动的克隆,item 是您单击拖动的原始项目。
但是,beforeStop
事件在接收事件之前触发。在 beforeStop 中,该项实际上是要添加到列表中的项。因此,在 beforeStop 中您可以保存该项目,然后在 receive 中使用它。
此处演示:http://jsfiddle.net/kcg29/
var newItem;
$(".list").sortable({
connectWith: ".list",
beforeStop: function (event, ui) {
newItem = ui.item;
},
receive: function(event,ui) {
$(newItem).doSomething();
}
});
关于jquery:如何更新可拖动克隆ID?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5788391/