javascript - AngularJS 指令中不调用 Drop 事件

Question

我有一个关于将事件放入 AngularJS 指令的奇怪问题。添加监听器是因为控制台根据 DOM 元素显示 - <td class="ng-isolate-scope" droppable="" colspan="2"> .当我更改为其他事件时 - 例如单击一切正常。 这是我的 html 代码:

<div ng-app="app">
    <div ng-controller="testCtrl">
        <table id="testtable">
            <tr>
                <td colspan="2" droppable>
                    <a data-ng-repeat="firstLink in first" href="#">
                        {{firstLink.text}}
                    </a>
                </td>
            </tr>
            <tr>
                <td>
                    <a data-ng-repeat="secondLink in second" href="#" draggable>
                        {{secondLink.text}}
                    </a>
                </td>    
                <td>
                    <a data-ng-repeat="thirdLink in third" href="#" draggable>
                        {{thirdLink.text}}
                    </a>
                </td>    
            </tr>
        </table>
    </div>
</div> 

这是我的 JavaScript:

var app = angular.module('app', []);

app.controller('testCtrl', function ($scope) {
    $scope.first = [
        {text: 1},
        {text: 2},
        {text: 3}
    ];

    $scope.second = [
        {text: 4},
        {text: 5},
        {text: 6}
    ];

    $scope.third =  [
        {text: 7},
        {text: 8},
        {text: 9}        
    ];
});

app.directive('draggable', function () {
    return function(scope, element) {
        // this gives us the native JS object
        var el = element[0];

        el.draggable = true;

        el.addEventListener(
            'dragstart',
            function(e) {
                console.log('dragstart called');
                e.dataTransfer.effectAllowed = 'move';
                e.dataTransfer.setData('Text', 'test test test');
                return false;
            },
            false
        );

        el.addEventListener(
            'dragend',
            function(e) {
                console.log('dragend called');
                e.preventDefault();
                return false;
            },
            false
        );
    }
});


app.directive('droppable', function () {
    return {
        scope: {
            drop: '&' // parent
        },
        link: function(scope, element) {
            var el = element[0];
            console.log(el);
            el.addEventListener(
                'drop',
                function(e) {
                    console.log('Why im not called?');
                    return false;
                },
                false
            );
        }
    }
});

这是 jsFiddle: http://jsfiddle.net/zono/kyFT8/

是什么导致了这种行为？

最好的问候。

Answer 1

我找到了解决方案。来自 dotoro 网络引用:

默认情况下，拖动操作的目标可以是可编辑元素(textarea、input:text、input:password、input:search)、内容可编辑模式下的元素、设计模式下的文档或其他应用。如果您希望在拖动操作期间允许其他元素成为放置目标，请同时取消 ondragenter 和 ondragover 事件。

所以这是工作的jsfiddle:

http://fiddle.jshell.net/kyFT8/11/