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

Posted 2023-05-08

【中文标题】在 dragstart 事件处理程序中 event.dataTransfer 和 event.originalEvent 始终为 null

【英文标题】：event.dataTransfer and event.originalEvent are always null inside dragstart event handler

【发布时间】：2014-09-01 05:08:05

【问题描述】：

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

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

我的拖动指令如下所示：

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')打过电话。

【参考方案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;
]);

【讨论】：

遇到了同样的问题。非常感谢。

【参考方案2】：

通过不同的修复遇到了同样的问题：如果您的放置处理程序中有 alert() 或 confirm() 对话框，则会清除 event.dataTransfer。

【讨论】：

0 反对票它对我有用。我尝试了一整天，最后这个解决方案对我有用。删除您的代码的警报。非常感谢。

类似地，看到这个答案：***.com/a/49492200/57624 在 Firefox 中调试时，dataTransfer 为空。 （啊！-我至少花了一个小时！）