javascript - event.dataTransfer 和 event.originalEvent 在 dragstart 事件处理程序中始终为 null

Question

我正在尝试通过以下帖子为 angularJS 创建拖放指令:http://jasonturim.wordpress.com/2013/09/01/angularjs-drag-and-drop/

但我无法发送任何数据，因为在 dragstart 事件处理程序中 dataTransfer 和 originalEvent 始终为 null。

我的拖动指令是这样的:

directives.directive('draggSrc', ['$rootScope', 'UuidService', function ($rootScope, UuidService) {
    var directive = {};

    directive.restrict = 'A';

    directive.link = function (scope, el, attrs) {
        el.attr("draggable", "true");
        var id = attrs.id;
        if (!attrs.id) {
            id = UuidService.new();
            el.attr("id", id);
        }

        el.bind("dragstart", function (evt) {
            console.log(evt);
            console.log(evt.dataTransfer);
            console.log(evt.originalEvent);
            evt.dataTransfer.setData('text', id);

            $rootScope.$emit("DRAG-START");
        });

        el.bind("dragend", function (evt) {
            $rootScope.$emit("DRAG-END");
        });
    };

    return directive;
}]);

我还调用了 $.event.props.push('dataTransfer')。

Answer 1

为了解决我的问题，我已经从使用 jQuery 的 bind 切换到使用 JavaScript 的 addEventListener 并且一切都按预期工作:

directives.directive('draggSrc', ['$rootScope', 'UuidService', function ($rootScope, UuidService) {
    var directive = {};

    directive.restrict = 'A';

    directive.link = function (scope, el, attrs) {
        el.attr("draggable", "true");
        var id = attrs.id;
        if (!attrs.id) {
            id = UuidService.new();
            el.attr("id", id);
        }

        el.get(0).addEventListener("dragstart", function (evt) {
            evt.dataTransfer.setData('text', id);
            $rootScope.$emit("DRAG-START");
        });

        el.get(0).addEventListener("dragend", function (evt) {
            $rootScope.$emit("DRAG-END");
        });
    };

    return directive;
}]);