jQuery UI Nested Sortable not drop the element

[Bhumi Shah]

I have developed nested drag drop using jquery ui but it does not allow me to drop outside the .drop-container div. Here is the jsfiddle to review:

[FIDDLE][1]

Once I drag item and drop it into the #list2 div, it is not working. How can i solve it?

[1]: ​http://jsfiddle.net/wsrbuef7/11/

Here is the code:

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>

Want to drop item outside the panel area. How can i do it? Is there any issue in code?