javascript - event.dataTransfer and event.originalEvent are always null inside dragstart event handler - Stack Overflow

admin管理员组

文章数量:1429080

I'm trying to create drag and drop directives for angularJS by following this post: /

But I can not send any data because inside the dragstart event handler dataTransfer and the originalEvent are always null.

My drag directive looks like this:

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;
}]);

I have also called $.event.props.push('dataTransfer').

I'm trying to create drag and drop directives for angularJS by following this post: http://jasonturim.wordpress./2013/09/01/angularjs-drag-and-drop/

But I can not send any data because inside the dragstart event handler dataTransfer and the originalEvent are always null.

My drag directive looks like this:

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;
}]);

I have also called $.event.props.push('dataTransfer').

• javascript
• jquery
• angularjs
• drag-and-drop
• draggable

Share Improve this question Follow asked Jul 10, 2014 at 17:45 MariusMarius 3,69355 gold badges2727 silver badges3030 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

In order to solve my problem I have switched from using jQuery's bind to using JavaScript's addEventListener and everything worked as expected:

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;
}]);

Had this same issue with a different fix: if you have an alert() or confirm() dialog in your drop handler, that clears out the event.dataTransfer.

本文标签：