Подтвердить что ты не робот

Angular Перетаскивание не работает на мобильных устройствах

Я использую этот плагин lvlDragDrop. Он не работает на мобильной платформе. На github они добавили этот issue. Но все-таки мне не повезло.

Демо-версия Github

HTML

<div ng-controller="ddController" style="margin-top:50px;">
            <div class="row">
                <div class="col-md-1 col-md-offset-1">
                    <p>Click and drag a color onto the grid to the right</p>
                    <div class="peg green" x-lvl-draggable="true" data-color="green">Green</div>
                    <div class="peg red" x-lvl-draggable="true" data-color="red">Red</div>
                    <div class="peg blue" x-lvl-draggable="true" data-color="blue">Blue</div>
                    <div class="peg black" x-lvl-draggable="true" data-color="black">Black</div>
                    <div class="peg grey" x-lvl-draggable="true" data-color="grey">Grey</div>
                </div>

                <div class="col-md-10">
                    <div ng-repeat="r in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]">
                        <span class="slot circle" ng-repeat="c in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]" x-lvl-drop-target="true" x-on-drop="dropped(dragEl, dropEl)"></span>
                    </div>
                </div>
            </div>
        </div>

JS

angular.module('ddApp', ['lvl.directives.dragdrop']) // register the directive with your app module
            .controller('ddController', ['$scope' , function($scope){
                $scope.dropped = function(dragEl, dropEl) { // function referenced by the drop target
                    //this is application logic, for the demo we just want to color the grid squares
                    //the directive provides a native dom object, wrap with jqlite
                    var drop = angular.element(dropEl);
                    var drag = angular.element(dragEl);

                    //clear the previously applied color, if it exists
                    var bgClass = drop.attr('data-color');
                    if (bgClass) {
                        drop.removeClass(bgClass);
                    }

                    //add the dragged color
                    bgClass = drag.attr("data-color");
                    drop.addClass(bgClass);
                    drop.attr('data-color', bgClass);

                    //if element has been dragged from the grid, clear dragged color
                    if (drag.attr("x-lvl-drop-target")) {
                        drag.removeClass(bgClass);
                    }
                }
            }]);
4b9b3361

Ответ 1

Эта директива не поддерживает сенсорные экраны. Как указано на GitHub:

Самая большая проблема с мобильным - переписывать обработчики для работы с различные события касания. Это должно быть выполнимо, но у меня нет попытка.


Попытка настроить это будет пустой тратой времени. Однако есть другие директивы перетаскивания, которые поддерживают события касания. Вы можете проверить:

Альтернативы:

angular -dragdrop

Наверное, самый известный. Вот несколько примеров . Обратите внимание, что они не работают с сенсорными устройствами. Чтобы поддерживать сенсорные события, вы также должны добавить touchpunch.js.

ngDraggable

Простой и работает на мобильных устройствах. Вы можете увидеть пример с поддержкой касания здесь.

ng-sortable

Работает на мобильных устройствах. Вы можете увидеть пример касания здесь.

Ответ 2

Я бы добавил "drag and drop" polyfill в ваше приложение. Как этот: https://github.com/Bernardo-Castilho/dragdroptouch

с помощью polyfill означает, что вы используете уже установленные события в html (например, onDragStart и onDragEnd). Затем вы можете использовать встроенные функции drag and drop, как это предполагалось, с помощью html.

Вот хорошая статья о том, почему вы должны использовать polyfill (написанный тем же автором репозитория github, на который делается ссылка в этом ответе) https://www.codeproject.com/Articles/1091766/Add-support-for-standard-HTML-Drag-and-Drop-operat

Установите его с помощью npm: npm install drag-drop-touch-polyfill и включите script в ваше приложение.