Question

我在angularJS中开发了拖放指令，并且它在我的导航器（计算机）上工作，但它在我的触摸设备中无法工作。我应该做些什么来调整我的代码以便在我的触摸设备上工作？或者我应该更改指令中的代码？在这里，您可以找到我的代码片段

＆＃13;

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

＆＃13;

Answer 1

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
        )

您必须使用touchstart，touchmove和touchend事件并控制位置，或者您可以将Jquery UI库与触摸Punch Library一起使用。这是链接implementing Drag and Drop for touch Devices

AngularJS：拖放指令适用于导航器，但它们不适用于我的触摸设备

1 个答案: