Angular 中的拖放事件

Posted 2023-05-08

【中文标题】Angular 中的拖放事件

【英文标题】：Drag and drop event in Angular

【发布时间】：2017-04-28 13:12:50

【问题描述】：

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>

【问题讨论】：

与此同时，我在某处读到数据仅在放置时可用。但是，甚至没有内部 drop 事件可用...

【参考方案1】：

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

【讨论】：

你是明星！

【参考方案2】：

如果您使用的是angular-dragdrop，那么an opened issue (titled "event.dataTransfer is undefined") 就存在这个问题。自己没有尝试过，但显然它没有正确修复。

【讨论】：

我没有用那个！