Перетаскивание элемента скрывается при использовании переполнения-y

Я создал Fiddle, чтобы продемонстрировать проблему (также может быть запущен внутри этого вопроса ниже).

У меня есть боковая панель игровых карточек, которые я хочу перетащить в основную область. На боковой панели хранится много карт, поэтому я хочу, чтобы она была прокручиваемой. Однако, когда я даю ему функцию прокрутки, тогда, когда я перетаскиваю карту, она скрывается, когда я вытаскиваю ее из боковой панели.

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

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


});

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

<link href="#" onclick="location.href='https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css'; return false;" 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>

Ответ 1

Чтобы перетаскивать объекты между зонами с прокручиваемыми или скрытыми переполнениями, вам необходимо создать клон div между div div и drop div с помощью ng-drag-clone

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

проверьте мои Fiddle

Я попытался обновить ваш код, но быстро продемонстрировал:

Я заметил, что вы не создали никакого способа для зоны перетаскивания для рендеринга или хранения передаваемых данных.

Я создал массив карт и массив cardDrop для хранения данных.

Я также реализовал функцию onDropComplete, чтобы вставить объект карты в картыDrop

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

и a 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.

Ответ 2

Библиотека 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 альтернативах, которые поддерживают это.