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

我正在尝试通过以下信息为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')。

最佳答案

为了解决我的问题，我已经从使用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;
}]);

关于javascript - 在dragstart事件处理程序中，event.dataTransfer和event.originalEvent始终为null，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24683074/