AngularJS：数据传输不工作？

Question

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

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

在全局对象上使用纯 Javascript 时，拖放处理效果很好。但是当试图实现相同的使用指令时，似乎是事件的 dataTransfer 对象 'dissapears'。这是我的指令（只是为了测试，我将 "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'，但同样发生了我错过了什么？

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

编辑：

所有angular代码，因此，所有Javascript都放在

内

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

Answer 1

您需要使用 dragstart 事件（而不是 ondragstart，除非您通过属性绑定事件）以便通过 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>

AngularJS：数据传输不工作？

AngularJS: dataTransfer not working?

html

javascript

drag-and-drop

angularjs

angularjs-directive