CODEWITHSUNDEEP
javascriptangularjsdrag-and-dropevent-handling
Unknown developer
Unknown developer

Reputation: 5970

Drag and drop event in Angular

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>

Upvotes: 3

Views: 15033

Answers (2)

Jithu Rajan
Jithu Rajan

Reputation: 452

Instead of drag event use dragstart. Please check https://plnkr.co/edit/BjnawQsQeeguC5njmQdz?p=preview

Upvotes: 3

GMaiolo
GMaiolo

Reputation: 4628

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.

Upvotes: 0

Related Questions