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», «на», «связывать» и то же самое происходит Что я отсутствует?

Есть ли лучший общий подход к тому, что я пытаюсь сделать?

Edit:

Все угловом кода, поэтому все Javascript помещен в

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

Answer 1

Вы должны использовать dragstart событие (не ondragstart, если не являются обязательными для события с помощью атрибута), чтобы получить соответствующее мероприятие с dataTransfer. Например, событие click не совпадает с событием dragstart с точки зрения объекта события. попробуйте:

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

Basic Demo

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>