如何將div從一個.panel-body div移動到另一個

Question

jQuery UI可拖動不允許從一個區域拖動到另一區域。

下面的代碼段包含組標題，詳細信息和組頁腳區域以及字段。 字段只能在區域內拖動。 嘗試將字段從組標題區域移動到其他區域是不可能的：如果將可拖動的div移到其區域之外，該區域將變為不可見。

如何解決此問題，以便div可以在具有panel-body類的div之間移動？

看起來像

 $(".panel-body").droppable({
    accept: ".designer-field"
  });

該命令被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 1

這是因為您的'designer-panel-body'類和'panel-resizable'類的溢出已設置為hidden，這導致拖動元素一旦被拖動到面板之外就被隱藏了。

您需要取消設置，並且應該能夠將元素從一個面板拖動到另一個面板。

這是一個演示，展示了在區域之間拖放元素的示例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);
   }
})

如何將div從一個.panel-body div移動到另一個

問題描述

1 個解決方案

解決方案1
1 已采納 2016-10-30 08:47:20

如何將div從一個.panel-body div移動到另一個

問題描述

1 個解決方案

解決方案1 1 已采納 2016-10-30 08:47:20

解決方案1
1 已采納 2016-10-30 08:47:20