Javascript 使用overflow-y时，将隐藏拖动项

我创建了一个来演示这个问题（也可以在下面这个问题中运行）

我有一个侧边栏的扑克牌图像，我想拖到一个主要区域。侧边栏中有很多卡片，所以我希望它可以滚动。然而，当我给它一个滚动功能时，当我拖动一张卡片时，当我把它从侧边栏中拖出来时，它就会隐藏起来

var-app=angular.module（'myApp'，['ngDraggable']）；
应用程序控制器（'ctrl'，函数（$scope）{
});
#库容器{
溢出y：滚动；
}
.卡片{
宽度：100%；
}

降落区
一旦开始拖动，您使用的
ngDraggable
库不支持将元素添加到父元素（如document.body）。您需要这样做，否则元素永远无法离开侧栏并保持可见。这就是CSS的工作原理

您可以使用另一个支持将可拖动元素添加到另一个元素的库，如jQuery UI：

app.directive('draggable', function() {
    return function($scope, $element, $attrs) {

        $element.draggable({
            appendTo: 'body',
            stop: function(event, ui) {
                // Handle new position
            }
        });

    };
});

可能有一些用于Jquery UI的AngularJS包装器以更具声明性的风格为您完成这项工作，或者其他支持这项工作的ngDraggable替代方案。
要在具有滚动或隐藏溢出的区域之间拖动对象，您需要使用
ng拖动克隆在拖放div和拖放div之间创建克隆div

        <div ng-drag-clone="">
            <img ng-src="{{clonedData .link}}" width="100px">
        </div>

以及一个
ondragplete
函数，用于从原始卡片组中删除卡片（对于某些应用程序，这是可选的…有时您希望从列表中拖动一个不删除选项的列表）：

我使用了
ng repeat
来渲染拖动区域中的每个甲板

                    <div class="row" ng-repeat="card in cards">
                        <img src="http://www.download32.com/images/screen/vector_playing_cards-467278.png" alt="" vertical-scroll="false" ng-drag="true" ng-drag-data="card" ng-drag-success="onDragComplete($data,$event)" ng-center-anchor="true" width="100px">
                    </div>



和降落区：

        <div style="min-height: 300px;" class="col-xs-5" ng-drop="true" ng-scroll="false" ng-drag-move="true" ng-drop-success="onDropComplete($data,$event)">
            <draggableClone></draggableClone>
             <h2> Drop Area </h2>

            <div ng-repeat="card in cardsDrop" ng-drag-success="onDragComplete($data,$event)" class="card">
                <img src="http://www.download32.com/images/screen/vector_playing_cards-467278.png" class="card" alt="" width="100px">
            </div>
        </div>


降落区


此外，我还为ng拖放添加了一些样式。
它不支持将其添加到父元素是什么意思？除了
之外的每个元素都有一个父元素只要可拖动元素是其当前父元素（gallery容器）的子元素，它就无法移出，因为应用了CSS（overflow-y:scroll）。它只适用于溢出：visibe。这是一个已知的问题，因此一些库所做的是添加一个允许此操作的选项：在拖动元素时，它们会临时将元素移动到父元素（如主体），以便您可以将其拖动到任何位置。您的库未实现该选项。是的，可拖动元素将在父级溢出中“丢失”。为了解决这个问题，您可以使用一个既不绑定拖放元素也不绑定拖放元素的克隆。@DaveAlperovich我不知道为什么它对您不起作用。。。你使用的是现代的Chrome浏览器吗？我也有同样的问题。容器中溢出的所有内容都将被隐藏。
overflow:scroll
的工作方式类似于溢出：隐藏但带有滚动条。这意味着您将无法通过卷轴，因为它将隐藏您的元素。我认为您需要尝试另一种方法。我已经用
ng drag clone
指令实现了您的示例。我还实现了拖放区数据数组和数据移动功能。感谢您添加这么多。但是，当拖动文件时，该代码段有一些奇怪的行为card@Imray，stack演示有点不对劲，但是试试我的小提琴你在哪里找到了
ng drag clone
？我不知道如何拖动国王以外的东西。。。有什么提示吗？@Imray我在fatlinesofcode/ngDragable github上发现了这个bug：。mattgoldspink完全按照我的建议做了，分叉了回购协议，并调整了ngDragClone指令，以考虑滚动偏移。如果您检查我的新小提琴上的ngDraggable参考，它现在指向mattgoldspink/ngDraggable。对您自己的代码进行更改。
                    <div class="row" ng-repeat="card in cards">
                        <img src="http://www.download32.com/images/screen/vector_playing_cards-467278.png" alt="" vertical-scroll="false" ng-drag="true" ng-drag-data="card" ng-drag-success="onDragComplete($data,$event)" ng-center-anchor="true" width="100px">
                    </div>

        <div style="min-height: 300px;" class="col-xs-5" ng-drop="true" ng-scroll="false" ng-drag-move="true" ng-drop-success="onDropComplete($data,$event)">
            <draggableClone></draggableClone>
             <h2> Drop Area </h2>

            <div ng-repeat="card in cardsDrop" ng-drag-success="onDragComplete($data,$event)" class="card">
                <img src="http://www.download32.com/images/screen/vector_playing_cards-467278.png" class="card" alt="" width="100px">
            </div>
        </div>