使用 overflow-y 时拖动项目会隐藏

Question

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

我有一个扑克牌图像的边栏，我想将其拖到主区域中。侧边栏包含很多卡片，所以我希望它可以滚动。但是，当我给它一个滚动功能时，当我拖动卡片时，当我将它拖出侧边栏时它会隐藏。

var app = angular.module('myApp', ['ngDraggable']);

app.controller('ctrl', function ($scope) {


});

#gallery-container {
    overflow-y: scroll;
}
.card {
    width: 100%;
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<script src="https://rawgit.com/fatlinesofcode/ngDraggable/master/ngDraggable.js"></script>
<div ng-app="myApp">
    <div ng-controller="ctrl">
        <div class="row">
            <div class="col-xs-3">
                <div id="gallery-container">
                    <div class="row">
                        <div class="col-sm-12">
                            <img ng-drag="true" ng-drag-data="hi" ng-drag-success="onDragComplete($data,$event)" ng-center-anchor="true" class="card" src="http://www.download32.com/images/screen/vector_playing_cards-467278.png" alt="">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12">
                            <img ng-drag="true" ng-drag-data="hi" ng-drag-success="onDragComplete($data,$event)" ng-center-anchor="true" class="card" src="http://www.download32.com/images/screen/vector_playing_cards-467278.png" alt="">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12">
                            <img ng-drag="true" ng-drag-data="hi" ng-drag-success="onDragComplete($data,$event)" ng-center-anchor="true" class="card" src="http://www.download32.com/images/screen/vector_playing_cards-467278.png" alt="">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12">
                            <img ng-drag="true" ng-drag-data="hi" ng-drag-success="onDragComplete($data,$event)" ng-center-anchor="true" class="card" src="http://www.download32.com/images/screen/vector_playing_cards-467278.png" alt="">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12">
                            <img ng-drag="true" ng-drag-data="hi" ng-drag-success="onDragComplete($data,$event)" ng-center-anchor="true" class="card" src="http://www.download32.com/images/screen/vector_playing_cards-467278.png" alt="">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12">
                            <img ng-drag="true" ng-drag-data="hi" ng-drag-success="onDragComplete($data,$event)" ng-center-anchor="true" class="card" src="http://www.download32.com/images/screen/vector_playing_cards-467278.png" alt="">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12">
                            <img ng-drag="true" ng-drag-data="hi" ng-drag-success="onDragComplete($data,$event)" ng-center-anchor="true" class="card" src="http://www.download32.com/images/screen/vector_playing_cards-467278.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-9">
                 <h2> Drop Area </h2>

            </div>
        </div>
    </div>
</div>

当我注释掉溢出的时候，赞

/*overflow-y: scroll;*/

在 CSS 中，现在可以使用了。

我怎样才能既有滚动侧边栏又能从中拖出项目？

Answer 1

您使用的 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
            }
        });

    };
});

可能 AngularJS Jquery UI 的包装器以更具声明性的方式为您完成此操作，或者支持此功能的其他 ngDraggable 替代方案。

Answer 2

要在具有滚动或隐藏溢出的区域之间拖动对象，您需要在拖动 div 和放置 div 之间使用ng-drag-clone

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

查看我的Fiddle

我已经尝试更新您的代码，但很快就证明了这一点：

我注意到您没有为拖放区创建任何方式来呈现或存储正在传递的数据。

我创建了一个 cards 数组和一个 cardsDrop 数组来存储数据。

我还实现了 onDropComplete 函数将卡片对象推送到 cardsDrop

$scope.onDropComplete = function (data, evt) {
    var index = $scope.cards.indexOf(data);
    if (index == -1) $scope.cardsDrop.push(data);
}

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

$scope.onDragComplete = function (data, evt) {
    console.log("133", "$scope", "onDragSuccess1", "", evt);
    var index = $scope.cards.indexOf(data);
    if (index > -1) {
        $scope.cards.splice(index, 1);
    }

并且我使用 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-drag 和 ng-drop 添加了一些样式。

使用 overflow-y 时拖动项目会隐藏

Dragging item gets hidden when overflow-y is used

html

javascript

css

drag-and-drop

angularjs

查看我的Fiddle