Bhumi Shah
Reputation: 9476
jQuery UI dropping issue
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:
$(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>Once I drag item and drop it into the #list2 dive,it is not working. How can I solve it?
Upvotes: 6
Views: 191
Answers (2)
DinoMyte
Reputation: 8868
Like mentioned by Lucas, you are missing the id='list1' in the main ul element. By adding that and changing the connectWith to the list2, it seems to work fine.
<ul id="#list1" class="layout_panels" style="float:left">
<li id="119" data-layout_id="24" style="width: 481px;">
.
.
.
Here's the working example : http://jsfiddle.net/wsrbuef7/17/
Upvotes: 0
Lucas Delobelle
Reputation: 434
When you're executing the 'sortable' function on your #list2 .drop-container, you're connecting it with #list1 which doesn't seem to exist.
Try to connect it with #list2, you should be able to drop your elements outside of the .drop-container div, and in the list2 div.
Moreover, you're repeating the connectWith: '#list1' instruction when executing the 'sortable' function on #list2. You can remove this connection.
Hope this will help !
Upvotes: 3
Related Questions
- jQuery UI destroy out of parent div
- Difficulty in finding the issue in my jQuery that's causing elements to disappear
- jquery-ui not applying css
- jQuery UI dropping elements only in special areas
- JQuery UI craziness
- how to fix my JQuery bug?
- Element position issue after dropped with jQuery UI
- jquery-ui broken
- jQuery UI problem: why do the elements go flying around the screen?
- Very simple jquery ui drag and drop does not drop