How to move div from one .panel-body div into another
Question
Jquery-UI draggable does not allow to drag from one area to another.
Code snippet below contains group header, detail and group footer areas with fields. Fileds can dragged only inside area. Trying to move field from group header area to other area is not possible: draggable div becomes invisible if moved outside of its area.
How to fix this so that divs can moved between divs having panel-body classes?
It looks like
$(".panel-body").droppable({
accept: ".designer-field"
});
command is ignored by jquery-ui.
$(function() { var startpos, selected = $([]), offset = { top: 0, left: 0 }; /* $(".designer-panel-body").droppable({ accept: ".designer-field" }); */ $(".designer-field").draggable({ stop: function(event, ui) { $(ui.draggable).detach().appendTo(this); }, start: function(event, ui) { var $this = $(this); if ($this.hasClass("ui-selected")) { selected = $(".ui-selected").each(function() { var el = $(this); el.data("offset", el.offset()); }); } else { selected = $([]); $(".designer-field").removeClass("ui-selected"); } offset = $this.offset(); }, drag: function(event, ui) { // drag all selected elements simultaneously var dt = ui.position.top - offset.top, dl = ui.position.left - offset.left; selected.not(this).each(function() { var $this = $(this); var elOffset = $this.data("offset"); $this.css({ top: elOffset.top + dt, left: elOffset.left + dl }); }); } }); $(".panel-resizable").resizable({ minWidth: "100%", maxWidth: "100%", minHeight: 1 }); });
.panel-resizable { min-height: 1px; /* overflow: hidden; */ margin: 0; padding: 0; } .designer-field { border: 1px solid lightgray; white-space: pre; overflow: hidden; position: absolute; } .designer-panel-body { min-height: 1px; /* overflow: hidden; */ margin: 0; padding: 0; } .panel-footer { padding: 0; } .designer-panel, .panel-body { margin: 0; padding: 0; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> </head> <body> <div class='panel designer-panel'> <div class='panel-body designer-panel-body panel-resizable' style='height:2cm'> <div class='designer-field' style='left:5px;top:6px;width:180px'>field 1 in group 1 header</div> <div class='designer-field' style='left:54px;top :36px;width:160px'>field 2 in group 1 header</div> </div> <div class='panel-footer'>Group 1 Header</div> </div> <div class='panel designer-panel'> <div class='panel-body designer-panel-body panel-resizable' style='height:1cm'> <div class='designer-field' style='left:24px;top:2px;width:140px'>field in detail group</div> </div> <div class='panel-footer panel-primary'>Detail <a role="button" id="designer-detail-addband"> Add group</a> </div> </div> <div class='panel'> <div class='panel-body designer-panel-body panel-resizable' style='height:1cm'> <div class='designer-field' style='left:44px;top:2px;width:140px'>field in group 1 footer</div> </div> <div class='panel-footer panel-warning'>Group 1 Footer</div> </div>
1 answers
solution1
1 ACCPTED 2016-10-30 08:47:20
This is due to that your 'designer-panel-body' class and 'panel-resizable' class have overflow set to hidden, causing the dragging element went hidden once they are dragged outside of the panel.
You need to unset that and you should be able to drag element from one panel to another.
Here's a demo to showcase dragging and dropping elements between areas http://codepen.io/jyloo/pen/GjbmLm
HTML
<div class="drag-area">
<div class="area">Droppable Area 1</div>
<div class="box">Box1</div>
<div class="box">Box2</div>
</div>
<div class="drag-area">
<div class="area">Droppable Area 2</div>
</div>
<div class="result">-</div>
CSS
.drag-area {
width: 200px;
height: 200px;
background: #fff;
display: inline-block;
vertical-align: top;
position: relative;
margin-left: 30px;
border: 1px solid #ddd;
box-shadow: 3px 3px 6px 3px rgba(0,0,0,0.06)
}
.area {
position:absolute;
margin: 0 auto;
color: #ccc;
font-size: 20px;
bottom: 10px;
left: 20px;
}
.box {
width: 50px;
height: 50px;
background: #673AB7;
color: #fff;
text-align: center;
z-index: 2;
border:2px solid #512DA8;
}
.result {
display: inline-block;
margin-left: 30px;
}
JS
$( ".box" ).draggable({
scope: 'demoBox',
revertDuration: 100,
start: function( event, ui ) {
//Reset
$( ".box" ).draggable( "option", "revert", true );
$('.result').html('-');
}
});
$( ".drag-area" ).droppable({
scope: 'demoBox',
drop: function( event, ui ) {
var area = $(this).find(".area").html();
var box = $(ui.draggable).html()
$( ".box" ).draggable( "option", "revert", false );
//Display action in text
$('.result').html("[Action] <b>" + box + "</b>" +
" dropped on " +
"<b>" + area + "</b>")
//Realign item
$(ui.draggable).detach().css({top: 0,left: 0}).appendTo(this);
}
})
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.