angular.module('myApp').directive('dragDrop', function() {
return {
link:function(scope,element){
element.on('dragover', function(event) {
event.preventDefault();
});
element.on('drop', function(event) {
event.preventDefault();
var data=event.originalEvent.dataTransfer.getData("Text");
event.target.parentNode.appendChild(document.getElementById(data));
});
element.on('drag', function(event) {
event.originalEvent.dataTransfer.setData("Text",event.target.id);
console.log(event.originalEvent.dataTransfer.getData("Text"));
scope.$apply();
});
}
};
});
The above code works very well when I adjust it as not using AngularJS. When I create the above directive for some totally unexplained reason console.log(event.originalEvent.dataTransfer.getData("Text"));
outputs nothing . Why that ? I also present the HTML code (drag and drop functionality between two lists):
<div class="col-xs-6" drag-drop>
<div class="header">Available Life Events</div>
<ul class="permission-levels">
<li style="margin:20px;" ng-attr-id="{{'ALE'+$index}}" draggable="true"
ng-repeat="event in Events track by $index">
{{event.name}}
</li>
</ul>
</div>
<div class="col-xs-6" drag-drop>
<div class="header">Life Events Applied</div>
<ul class="permission-levels">
<li style="margin:20px;" ng-attr-id="{{'LEA'+$index}}" draggable="true"
ng-repeat="event in events track by $index">
{{event.name}}
</li>
</ul>
</div>
Instead of drag
event use dragstart
. Please check https://plnkr.co/edit/BjnawQsQeeguC5njmQdz?p=preview
If you're using angular-dragdrop , there's an opened issue (titled "event.dataTransfer is undefined") with this exact problem. Haven't tried it myself, but apparently it's not fixed properly.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.