移动端无法使用Angular拖放功能

Question

移动端无法使用Angular拖放功能

javascriptjqueryangularjsangularjs-directivedrag-and-drop

12

我正在使用这个lvlDragDrop插件。它在移动平台上无法正常工作。在github上，他们已经添加了这个问题。但是我仍然没有运气。 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);
                    }
                }
            }]);

- Shrinivas Pai

2个回答

1

我建议在您的应用程序中添加一个“拖放” polyfill。像这样一个： https://github.com/Bernardo-Castilho/dragdroptouch 使用polyfill意味着您正在利用html中已经建立的事件（例如onDragStart和onDragEnd）。然后，您可以使用拖放的内置功能，以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 并将脚本包含在您的应用程序中。

- John

看起来应该可以工作。但是我只是想知道如何使它能够与Angular 10一起工作，即使它能够在AngularJS（又称Angular 1.x）上工作。 - Wisarut Bholsithi

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jaqen H'ghar · Accepted Answer

该指令不支持触摸屏幕。如在 GitHub 上所述：

移动设备最大的问题是将处理程序重写为与各种触摸事件一起使用。这应该是可行的，但我没有尝试过。

尝试调整它会浪费你的时间。然而，还有其他支持触摸事件的拖放指令。你可以查看以下内容：

备选方案：

angular-dragdrop

可能是最著名的指令。这里有一些示例。请注意，它们不适用于触摸设备。要支持触摸事件，您还应添加touchpunch.js。

ngDraggable

简单易用，在移动设备上运行良好。您可以在这里看到一个启用了触摸的示例。

ng-sortable

适用于移动设备。您可以在这里看到启用了触摸的示例。