javascript - AngularJS:数据传输不起作用？

Question

我正在使用 AngularJS 编写一个简单的应用程序(这里是新手!)。

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

在全局对象上使用纯 Javascript 时，拖放处理效果非常好。但是，当尝试实现相同的 using 指令时，事件的 dataTransfer 对象似乎“消失”了。这是我的指令(只是为了测试，我用“click”替换了“ondragstart”):

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”，但发生了同样的情况我错过了什么？

对于我想做的事情，有更好的整体方法吗？

编辑:

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

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

Answer 1

您需要使用 dragstart 事件(不是 ondragstart，除非您通过属性绑定(bind)事件)，以便通过 dataTransfer 属性接收适当的事件。例如，就事件对象表示的内容而言，click 事件与 dragstart 事件不同。尝试:

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

基本演示

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

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

<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>