当我拖出 div 时，拖放是隐藏的答案

【问题标题】：Drag and drop is hidden when I drag out of div当我拖出 div 时，拖放是隐藏的
【发布时间】：2016-08-17 19:58:36
【问题描述】：

我正在使用ng-draggable 和malihu custom scroll bar，当我将div 拖出时，我再也看不到它了，但它确实正确地落入了另一个div。我希望能够看到 div，因为我将其拖动到另一个div。

我已经创建了一个 Plunker 来解决这个问题：

https://plnkr.co/edit/GBnZCWORRc6lpTaGXd17?p=preview

【问题讨论】：

我继续对这个问题进行研究，它似乎是溢出的问题：隐藏属性。我试图删除它，但滚动不再起作用。我也尝试过使用 z-index，但没有成功。

标签： jquery html css angularjs twitter-bootstrap

【解决方案1】：

这是因为，.mCustomScrollBox 和 .mCustomScrollBox 有溢出：隐藏。

如果你让这些元素有溢出：可见，你将能够看到运动，从而解决手头的问题。但这会破坏当前的行为、盒子的大小等。

【讨论】：

是的，我同意当应用 overflow: hidden 时，可拖动的 div 列表继续在包含的 div 之外。有没有可以保留当前功能的css？
这不是我能想到的。除非在拖动时，否则不会使拖动的元素不再是该框的一部分。你可以暂时把它变成身体的一部分，然后把它添加到它掉落的地方。除非您不关心长无滚动框，否则我建议您不要进行上述 CSS 修复。

【解决方案2】：

库 ng-draggable 包含 ng-drag-clone ，您可以使用它来克隆您正在拖动的 div。我还包括了 ng-drag-start 来传递被拖动的 div 的数据。

ng-drag-clone:
  <div ng-drag-clone="" class="droppable-list">
 {{vm.clonedData.name}}
 </div>

ng-drag-start:
  <div class="droppable-list"  ng-drag="true" ng-drag-data="d" 
  ng-drag-start="vm.onDragStart($data, $event)" 
  ng-drag-success="vm.onDatabaseDragCompleteSelection($data,$event)">
 {{d.name}}
 </div>

Controller:
  vm.onDragStart = function(data){
     vm.clonedData = data;
   }

这是一个更新的 Plunker： https://plnkr.co/edit/YTi0PK0VzvMC5OK1trRI?p=preview

【讨论】：