#15053 closed bug (notabug)

Opened September 27, 2016 10:35AM UTC

Closed October 12, 2016 03:56PM UTC

jQuery UI Nested Sortable not drop the element

Reported by: bhumiradixweb Owned by: bhumiradixweb
Priority: minor Milestone: none
Component: ui.sortable Version: 1.11.3
Keywords: Cc:
Blocked by: Blocking:
Description

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: http://jsfiddle.net/wsrbuef7/11/

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

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

Attachments (0)
Change History (2)

Changed September 27, 2016 12:17PM UTC by scottgonzalez comment:1

description: 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? \ → 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: http://jsfiddle.net/wsrbuef7/11/ \ \ Once I drag item and drop it into the #list2 div, it is not working. How can i solve it? \ Want to drop item outside the panel area. How can i do it? Is there any issue in code? \
owner: → bhumiradixweb
status: new → pending

There's a fair amount of code in that fiddle. If the problem is just with nested sortables, please reduce the test case to eliminate anything unrelated to the bug.

Changed October 12, 2016 03:56PM UTC by scottgonzalez comment:2

resolution: → notabug
status: pending → closed

Closing due to inactivity.