AngularJS：dataTransfer無法正常工作？

Question

我正在使用AngularJS編寫一個簡單的應用程序（新手在這裏！）。

此應用程序創建一個列表，並允許您將元素移動到不同的框中。

在全局對象上使用純Javascript時，拖放處理效果很好。但是當試圖實現相同的使用指令時，它似乎是事件'消失'的dataTransfer對象。這裏是我的指令（只是用於測試的問題我改爲「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」，「捆綁」和同樣的情況 我是什麼失蹤？

有沒有一個更好的整體方法，我想要做什麼？

編輯：

所有的角碼，因此，所有的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>