如何将 div 从一个 .panel-body div 移动到另一个答案

【问题标题】：How to move div from one .panel-body div into another如何将 div 从一个 .panel-body div 移动到另一个
【发布时间】：2016-10-30 07:10:40
【问题描述】：

Jquery-UI draggable 不允许从一个区域拖到另一个区域。

下面的代码 sn-p 包含带有字段的组页眉、详细信息和组页脚区域。文件只能在区域内拖动。尝试将字段从组标题区域移动到其他区域是不可能的：如果移动到其区域之外，可拖动的 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>

【问题讨论】：

标签： javascript jquery html jquery-ui jquery-ui-draggable

【解决方案1】：

这是因为你的 'designer-panel-body' 类和 'panel-resizable' 类的溢出设置为隐藏，导致拖动元素一旦被拖出面板就隐藏了。

您需要取消设置，并且应该能够将元素从一个面板拖动到另一个面板。

这是一个演示区域之间拖放元素的演示 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;
}

$( ".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);
   }
})

【讨论】：

非常感谢。有效。如何在此代码中使标题可排序？我把它贴在stackoverflow.com/questions/40333881/…