2

I developed drag and drop directives in angularJS and it's working on my navigator (computer) but it didn't work in my touch devices. Is there something I should do to adapt my code to work on my touch devices? or should I change the code in the directives ? Here you find a snippet of my code

module.exports = angular
  .module('app.dashboard.controller', ['ngTouch'])
  .controller('appDashboard', appDashboard)
  .directive('draggable', draggable)
  .directive('droppable', droppable);
function droppable() {
        return {
            scope: {
            drop: '&',
            bin: '='
        },
        link: function(scope, element) {
            // again we need the native object
            var el = element[0];
      
            el.addEventListener(
                'dragover',
                function(e) {
                    e.dataTransfer.dropEffect = 'move';
                    // allows us to drop
                    if (e.preventDefault) e.preventDefault();
                    this.classList.add('over');
                    return false;
                },
                false
            );
      
            el.addEventListener(
                'dragenter',
                function(e) {
                    this.classList.add('over');
                    return false;
                },
                false
            );
      
            el.addEventListener(
                'dragleave',
                function(e) {
                    this.classList.remove('over');
                    return false;
                },
                false
            );
      
            el.addEventListener(
                'drop',
                function(e) {
                    // Stops some browsers from redirecting.
                    if (e.stopPropagation) e.stopPropagation();
          
                    this.classList.remove('over');
          
                    var binId = this.id;
                    var item = document.getElementById(e.dataTransfer.getData('Text')).cloneNode(true);
                    item.classList.remove('drag');
                    this.appendChild(item);
                    // call the passed drop function
                    scope.$apply(function($scope) {
                        var fn = scope.drop();
                        if ('undefined' !== typeof fn) {            
                            fn(item.id, binId);
                        }
                    });
          
                    return false;
                },
                false
            );
        }
        }
    }
function draggable() {
    return {
      scope: {
        drag: '&' // parent
      },
      link: function(scope, element) {
    // this gives us the native JS object
        var el = element[0];
    
        el.draggable = true;
    
        el.addEventListener(
          'dragstart',
          function(e) {
            e.dataTransfer.effectAllowed = 'move';
            e.dataTransfer.setData('Text', this.id);
            this.classList.add('drag');
            return false;
          },
          false
        );
    
      el.addEventListener(
        'dragend',
        function(e) {
          this.classList.remove('drag');
          return false;
        },
        false
      );
      }
    }
  }
jonrsharpe
  • 115,751
  • 26
  • 228
  • 437
Miled Braik
  • 41
  • 7

1 Answers1

0
el.addEventListener(
            'touchend',
            function(e) {
                e.dataTransfer.dropEffect = 'move';
                // allows us to drop
                if (e.preventDefault) e.preventDefault();
                this.classList.add('over');
                return false;
            },
            false
        )

You have to use the touchstart,touchmove and touchend event and control the positions or you can use Jquery UI library with touch Punch Library. Here is the link implementing Drag and Drop for touch Devices

shaunak1111
  • 951
  • 1
  • 11
  • 17
  • You need to get hold of the element throught JQuery lite .Pass class name in attribute and access through isolated scope var elem =$(class-name); // class name is the property passed in isolated scope in link function and add the attach draggable events to it elem.draggable(); Link - https://api.jqueryui.com/draggable/ If you add the touchPunch library it will work , no need to add additional code but it wont work in some devices, better go with hammer JS/ Kinetic JS – shaunak1111 May 29 '17 at 12:51
  • Is there any way to not pass by jquery ? – Miled Braik May 29 '17 at 13:00
  • Jquery UI uses Jquery therefore just leverage JQuery – shaunak1111 May 29 '17 at 13:02