Andrus Andrus - 1 month ago 11
HTML Question

How to move div from one .panel-body div into another

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>




Answer

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);
   }
})