Question

我正在使用AngularJS编写一个简单的应用程序（新手在这里！）。

此应用程序创建一个列表，允许您将元素移动到不同的框中。

在全局对象上使用纯Javascript时，拖放处理效果很好。但是当试图实现相同的using指令时，似乎事件'dissapears'的dataTransfer对象。这是我的指令（仅用于测试我将“ondragstart”替换为“click”）：

FulboApp.directive('insertPlayers',function(){
    return {
        restrict:'E',
        template:'<img class="img-thumbnail" draggable="true" src="img/horangel.jpg" id="{{play.id}}" ng-dblclick="deletePlayer(play.id)" />',
        replace:true,
        link: function($scope,element,attrs){
            $(element).on('click',function(ev){

                //returns 'undefined'
                console.log(ev.dataTransfer);


                //ev.dataTransfer.setData('text',ev.target.id);
            });
        }
    }
});

我尝试使用'addEventListener'，'on'，'bind'，同样的事情发生了我错过了什么？

对于我正在尝试做的事情，是否有更好的整体方法？

修改

所有的角度代码，因此，所有的Javascript都放在

中

(function(){
  ...
   //Here
  ...
})()

Answer 1

您需要使用dragstart事件（不是ondragstart，除非您通过属性绑定事件）才能接收具有dataTransfer属性的相应事件。例如，就事件对象所代表的内容而言，click事件与dragstart事件不同。尝试：

 element.on('dragstart', function(ev) {
    //....
 });

基本演示

＆＃13;

angular.module('app', []).directive('insertPlayers', function() {
  return {
    restrict: 'E',
    template: '<img class="img-thumbnail" draggable="true" src="http://placehold.it/32x32" id="asdf" ng-dblclick="deletePlayer(play.id)" />',
    replace: true,
    link: function($scope, tElm) {
      tElm.on('dragstart', function dragstart(event) {
        event.dataTransfer.setData('text/plain', event.target.id);
      });
    }
  }
}).directive('droppable', function() {
  return {
    restrict: 'E',
    link: function(scope, tElm) {
      tElm.on('dragover', function dragover(ev) {
        ev.preventDefault();
      });

      tElm.on('drop', function drop(ev) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData("text");
        ev.target.appendChild(document.getElementById(data));
      });
    }
  }
});

＆＃13;

#div1 {
  border: 1px solid #000;
  height: 32px;
  width: 32px;
  display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js">
</script>
<div ng-app='app'>
  <insert-players></insert-players>

  <droppable id="div1"></droppable>
</div>

＆＃13;

AngularJS：dataTransfer无法正常工作？

1 个答案: