Search and Top Navigation
#15080 new bug ()
Opened October 13, 2016 12:45PM UTC
Last modified November 03, 2016 10:20AM UTC
Nested Drag and Drop using jquery ui not working properly - Working in version 1.10.4
| Reported by: | bhumiradixweb | Owned by: | bhumiradixweb |
|---|---|---|---|
| Priority: | minor | Milestone: | none |
| Component: | ui.sortable | Version: | 1.12.1 |
| Keywords: | Cc: | ||
| Blocked by: | Blocking: |
Description
I have developed nested drag drop using jQuery UI but it does not allow me to drop outside .drop-container div. Here is the code snippet and JSFIDDLE to review:
[CODE REMOVED]
[JSFIDDLE][1]
Once I drag item and drop it into the #list2 dive,it is not working. How can I solve it?
Attachments (0)
Change History (3)
Changed January 01, 1970 12:24AM UTC by comment:1
| status: | pending → new |
|---|
Changed October 17, 2016 08:28PM UTC by comment:2
| description: | I have developed nested drag drop using jQuery UI but it does not allow me to drop outside .drop-container div. Here is the code snippet and JSFIDDLE to review: \ \ <!-- begin snippet: js hide: true console: true babel: false --> \ \ <!-- language: lang-js --> \ \ $(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('|')); \ } \ }); \ \ <!-- language: lang-css --> \ \ #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; \ } \ \ <!-- language: lang-html --> \ \ <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> \ \ <!-- end snippet --> \ \ [JSFIDDLE][1] \ \ \ Once I drag item and drop it into the #list2 dive,it is not working. How can I solve it? \ \ \ [1]: http://jsfiddle.net/wsrbuef7/19/ → I have developed nested drag drop using jQuery UI but it does not allow me to drop outside .drop-container div. Here is the code snippet and JSFIDDLE to review: \ \ [CODE REMOVED] \ \ [JSFIDDLE][1] \ \ \ Once I drag item and drop it into the #list2 dive,it is not working. How can I solve it? \ \ \ [1]: http://jsfiddle.net/wsrbuef7/19/ |
|---|---|
| owner: | → bhumiradixweb |
| status: | new → pending |
Changed November 03, 2016 10:20AM UTC by comment:3
already removed unused code. This is just to show what i am doing and tried to remove all code but the issue is same so it is from core side.
There's a fair amount of logic involved for just nested drag and drop. Please remove all the unrelated code in that fiddle.