我使用jQuery UI开发了嵌套拖放，但它不允许我放弃.drop-container div。以下是要审核的代码段和JSFIDDLE：
$(function() {
$("#list2 .drop-container").sortable({
connectWith: "#list2 .drop-container",
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);
}
});
$("#list2").sortable({
connectWith: "#list2",
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);
$("#list2 .drop-container").sortable({
connectWith: "#list2",
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()
//console.log(this_id);
//console.log(preview);
}
}); //.disableSelection()
$("#list2").bind("sortupdate", function(event, ui) {
//console.log($('#list2'));
var result = $('#list2').sortable('toArray');
var str = '';
for (var i = 0; i < result.length; i++) {
str += result[i] + "|";
var tmp = "#" + result[i] + " .drop-container";
if ($(tmp).length > 0) {
$(tmp).each(function() {
if ($(this).children("li").length) {
str += $(this).parent()[0].id + "|";
$(this).children("li").each(function() {
str += this.id + "|";
})
}
})
}
} //console.log(result);
alert(str);
});
function disp(list) {
var a = [];
for (var i = 0; i < list.length; i++) {
a.push(list[i]);
}
$('input').val(a.join('|'));
}
});#list1,
#list2,
#list3 {
list-style-type: none;
margin: 0;
padding: 0 0 0;
float: left;
background-color: #CED1D6;
}
#list2 li {
margin: 0px 0px 1px 0px;
padding: 2px 0 2px 2px;
width: 395px;
cursor: move;
}
#list1 li {
margin: 0px 0px 1px 0px;
padding: 2px 0 2px 2px;
cursor: move;
}
#list2 li {
margin: 5px 5px 0 5px;
padding: 3px 3px 3px 3px;
width: 595px;
cursor: move;
display: inline-block;
vertical-align: middle;
}
#list2 li {
margin: 0px 0px 1px 0px;
padding: 2px 0 2px 2px;
width: 595px;
cursor: move;
line-height: 23px;
}
#list2 ul.drop-container {
padding-left: 0px;
border: 1px solid #A9A9A9;
background: #D3D3D3;
min-height: 100px;
}
#list2 ul.drop-container li {
width: 575px;
}
#list2 > li span.lspan {
padding: 5px;
float: left;
}
.layout_panels {
padding-left: 10px
}
.layout_panels li {
padding-left: 10px;
width: 580px;
}
.widerbox {
width: 970px;
}
.pancls {
line-height: 35px;
font-size: 14px;
}
#list2 ul.drop-container li {
border: 1px solid #A9A9A9;
}
#list2 li span.tttip {
text-overflow: ellipsis;
width: 65%;
overflow: hidden;
white-space: nowrap;
}
#list2 li span.pull-left i {
display: none
}
#list2 {
padding-bottom: 20px !important;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/black-tie/jquery-ui.css">
</script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/ui-lightness/jquery-ui.css">
</script>
<div class="workarea" style="border:1px solid green; width:60%; padding:0; margin:0 0 0 15px;float:left">
<h3>Your List</h3>
<ul id="list2" class="connectedSortable ui-sortable" style="width: 100%; min-height: 500px;">
<li style="width: 500px;" class="ui-state-default ui-sortable-handle" id="997">
5.jpg
<span class="pull-right">
<div class="text-right hroffset">
<a data-toggle="modal" class="preview" ><i class="fa fa fa-eye fa-2x valignmid text-green"></i></a>
<a href="javascript:void(0)" class="deletemedia"><i class="fa fa-times fa-stack fa-inverse"></i></a>
</div>
</span>
</li>
<li style="width: 500px;" class="ui-state-default ui-sortable-handle" id="998">
6.jpg
<span class="pull-right">
<div class="text-right hroffset">
<a data-toggle="modal" class="preview"><i class="fa fa fa-eye fa-2x valignmid text-green"></i></a>
<a href="javascript:void(0)" class="deletemedia"><i class="fa fa-times fa-stack fa-inverse"></i></a>
</div>
</span>
</li>
<li class="ui-draggable ui-draggable-handle ui-state-default ui-sortable-handle" style="width: 500px; height: auto;" id="layoutdata_24_3">
Layout4
<span class="pull-right">
<div class="text-right">
<a href="javascript:void(0)" class="deletemedia"><i class="fa fa-times fa-stack fa-inverse"></i></a>
</div>
</span>
<ul class="layout_panels" style="float:left">
<li id="119" data-layout_id="24" style="width: 481px;">
<span class="pancls pull-left">Panel: New ( 1360 X 768 ) </span><span class="pull-right"></span>
<div class="clearfix"></div>
<ul class="drop-container ui-sortable" style="width: 478px;">
<li class="ui-draggable ui-draggable-handle ui-state-default" style="height: auto; width: 477px;" id="1121">
<span class="pull-left">1.jpg</span>
<span class="pull-right">
<div class="text-right hroffset">
<a data-toggle="modal"class="preview"><i class="fa fa fa-eye fa-2x valignmid text-green"></i></a>
<a href="javascript:void(0)" class="deletemedia"><i class="fa fa-times fa-stack fa-inverse"></i></a>
</div>
</span>
</li>
<li class="ui-draggable ui-draggable-handle ui-state-default" style="height: auto; width: 477px;" id="433">
<span class="pull-left">2.jpg</span>
<span class="pull-right">
<div class="text-right hroffset">
<a data-toggle="modal" class="preview" ><i class="fa fa fa-eye fa-2x valignmid text-green"></i></a>
<a href="javascript:void(0)" class="deletemedia"><i class="fa fa-times fa-stack fa-inverse"></i></a>
</div>
</span>
</li>
<li class="ui-draggable ui-draggable-handle ui-state-default" style="height: auto; width: 800px;" id="996" >
<span class="pull-left">4.jpg</span>
<span class="pull-right">
<div class="text-right hroffset">
<a data-toggle="modal" class="preview" ><i class="fa fa fa-eye fa-2x valignmid text-green"></i></a>
<a href="javascript:void(0)" class="deletemedia"><i class="fa fa-times fa-stack fa-inverse"></i></a>
</div>
</span>
</li>
<li class="ui-draggable ui-draggable-handle ui-state-default" style="height: auto; width: 800px;" id="995" >
<span class="pull-left">3.jpg</span>
<span class="pull-right">
<div class="text-right hroffset">
<a data-toggle="modal" class="preview" ><i class="fa fa fa-eye fa-2x valignmid text-green"></i></a>
<a href="javascript:void(0)" class="deletemedia"><i class="fa fa-times fa-stack fa-inverse"></i></a>
</div>
</span>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
一旦我将项目拖放到＃list2潜水中，它就无效了。我该如何解决？
答案 0 :(得分：3)
当您执行＆＃39; sortable＆＃39;您#list2 .drop-container上的功能，您将其与#list1连接起来似乎不存在。
尝试将其与#list2连接，您应该能够将元素放在.drop-container div和list2 div之外。
此外，您在执行“排序”时会重复connectWith: '#list1'指令。 #list2上的函数。您可以删除此连接。
希望这会有所帮助！
答案 1 :(得分：0)
如Lucas所述，您在主list1元素中缺少id ='ul'。通过添加并将connectWith更改为list2，它似乎工作正常。
<ul id="#list1" class="layout_panels" style="float:left">
<li id="119" data-layout_id="24" style="width: 481px;">
.
.
.
以下是工作示例：http://jsfiddle.net/wsrbuef7/17/