Drag and drop event in Angular
11,318
Instead of drag
event use dragstart
. Please check
https://plnkr.co/edit/BjnawQsQeeguC5njmQdz?p=preview
Author by
Unknown developer
Updated on June 04, 2022Comments
-
Unknown developer almost 2 years
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>
-
Unknown developer over 7 yearsI am not using that!
-
Unknown developer over 7 yearsYou are a star!