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

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

在drag div和drop div之间创建clone div

        <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中添加了一些样式。

Answer 2

一旦开始拖动，您正在使用的ngDraggable库不支持将元素添加到父元素（如document.body）。您需要，否则该元素永远不会离开侧边栏并继续可见。这就是CSS的工作方式。

你可以做的是使用另一个支持将draggable元素添加到另一个元素的库，比如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替代方法。

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

2 个答案:

检查我的Fiddle