-1
我已经开发了使用jquery ui的嵌套拖放，但它不允许我放置
.drop-container div之外。这里是的jsfiddle审查：嵌套拖放使用jquery ui不能正常工作
一旦我拖累了项目，将其拖放到＃DIV列表2，它不工作。我如何解决它？
下面是代码：
JS：
$(function() {
$("#list2 .drop-container").sortable({
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);
}
});
$("#list2").sortable({
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);
$("#list2 .drop-container").sortable({
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()
//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('|'));
}
});
HTML：
<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>
希望将面板区域外落项。我该怎么做？代码中有没有问题？
使用内置的用户界面，而不是ondomready，因为你也有一个$（function（）函数，顺便提一下，这里也提供了一些代码 – mplungjan
disp函数只是用来重置被丢弃的物品 –
那么它阻止代码执行 – mplungjan