在Angular中拖放事件

Question

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();
              });
           }

        };
    });

當我將其調整為不使用AngularJS時，上面的代碼非常有效。 當我為一些完全無法解釋的原因創建上述指令時console.log(event.originalEvent.dataTransfer.getData("Text")); 沒有輸出 。 為什么 ？ 我還提供了HTML代碼（兩個列表之間的拖放功能）：

<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>

Answer 1

而不是drag事件使用dragstart 。 請檢查https://plnkr.co/edit/BjnawQsQeeguC5njmQdz?p=preview

Answer 2

如果你正在使用angular-dragdrop ，那么就會出現一個問題（標題為“event.dataTransfer is undefined”） 。 沒有親自嘗試過，但顯然它沒有正確修復。