angular Drag and Drop not working on mobile

Question

I am using this lvlDragDrop plugin. It is not working on mobile platform. On github they have added this issue. But still I dont have any luck.

Github Demo

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);
                    }
                }
            }]);

Answer 1

This directive doesnt support touch screens. As stated on GitHub:

The biggest issue with mobile is rewriting the handlers to work with the various touch events. It should be doable, but I haven't attempted.

---

Trying to adjust it would be a waste of your time. There are other drag and drop directives that support touch events though. You can check out:

Alternatives:

angular-dragdrop

Probably most famous. Here are some examples. Notice they dont work with touch devices. To support touch events you should add also touchpunch.js.

ngDraggable

Simple and works on mobile. You can see a touch enabled example here.

ng-sortable

Works on mobile. You can see touch enabled example here.

Answer 2

I would add a "drag and drop" polyfill in your application. Like this one: https://github.com/Bernardo-Castilho/dragdroptouch

using a polyfill means that you are utilizing already established events in html (such as onDragStart and onDragEnd). Then you can use the built in features of drag and drop the way it was meant to with html.

Here is a good article on why you should use a polyfill (written by the same author of the github repo referenced in this answer) https://www.codeproject.com/Articles/1091766/Add-support-for-standard-HTML-Drag-and-Drop-operat

Install it using npm: npm install drag-drop-touch-polyfill and include the script in your application.