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

Question

我创建了一个小提琴来演示这个问题(也可以在下面这个问题中运行).

我有一个侧边栏的扑克牌图片,我想拖到一个主要区域.侧边栏包含很多卡片,因此我希望它可以滚动.但是,当我给它一个滚动功能时,当我拖动一张卡片时,当我将它拖出侧边栏时它会被隐藏起来.

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

要在具有滚动或隐藏溢出的区域之间拖动对象,您需要使用以下命令在drag div和drop div之间创建clone div ng-drag-clone

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

检查我的小提琴

我试图更新你的代码,但很快就证明了这一点:

我注意到你没有创建任何方法让drop区渲染或存储传递的数据.

我创建了一个卡片阵列和一个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替代方案.