将项目放入已放置的项目中
<table id='list1' >
</table>
<ul id="list2" >
</ul>
<table id='list3' >
<tr><td>test<ul style="min-height: 100px;border:1px solid red" class="drop-container"></ul></td></tr>
</table>
我有以下代码
$( "#list3 li" ).draggable({
connectToSortable: "#list2",
helper: "clone",
revert: "invalid"
});
$( "#list1 li" ).draggable({
connectToSortable: "#list2",
helper: "clone",
revert: "invalid",
greedy: true
});
如何通过jquery的拖放API将list1项目直接拖放到list2中,以及list2的ul
布局标签(该标签将来自list3)?
最佳答案
所以你想要实现的目标可以这样总结
Step 1 : Drag and drop some Layout(which is inside
li
tag) from#list3
to#list2
.Step 2 : Drag and drop some media(which is also inside
li
tag) from#list1
to#list2
directly and also#list2
Layout's ul tag.drop-container
which is now has been dragged to#list2
.
目前,您正在将 #list1 li
放入 #list 2
中,但应将其放入 .drop-container of#list2
中或#list2
(如果您想直接将#list li
添加到#list2
)
所以#list1 li
应该连接到#list2和#list2
的.drop-container
$("#list1 li").draggable({
connectToSortable: "#list2 .drop-container,#list2",//both element should be connected
helper: "clone",
revert: "invalid",
greedy: true
});
之后,只有在#list2
收到一些布局之后,才需要将sortable
API添加到#list2的.drop-container
中来自 #list3
的
因此,在 list2
的 sortable
的 receive 方法内调用 #list2 .drop-container
上的 sortable
。
现在您的#list2
接收函数变为
receive: function (event, ui) {
console.log(ui);
console.log(event);
var this_id = $(ui.item).attr("id");
var preview = $(itemContext).html().replace(/<!--/g, '').replace(/-->/g, '');
$(itemContext).attr("id", this_id);
$(itemContext).css("width", $('#list2').width() - 20).addClass("ui-state-default").height('auto');
$(itemContext).html(preview);
//Modified code starts here, the sortable should be added here
$("#list2 .drop-container").sortable({//call sortable to every element which you want to drop to.
connectWith: "#list1",
over: function () {
removeIntent = false;
},
out: function () {
removeIntent = true;
},
beforeStop: function (event, ui) {
itemContext = ui.item.context;
if (removeIntent == true) {
ui.item.remove();
disp($("#list2").sortable('toArray'));
}
//console.log(itemContext);
},
receive: function (event, ui) {
console.log(ui);
console.log(event);
var this_id = $(ui.item).attr("id");
var preview = $(itemContext).html().replace(/<!--/g, '').replace(/-->/g, '');
$(itemContext).attr("id", this_id);
$(itemContext).css("width", $('#list2').width() - 20).addClass("ui-state-default").height('auto');
$(itemContext).html(preview);
//console.log(this_id);
//console.log(preview);
}
}); //.disableSelection()
//end of modified code
//console.log(this_id);
//console.log(preview);
}
});
关于jquery - 使用 jquery ui 嵌套拖放,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29669537/