在 Chrome 中的 event.dataTransfer.setData(mimeType, angular.toJson(item)) 之后未设置 HTML5 DragDrop dataTransfer.types答案

【问题标题】：HTML5 DragDrop dataTransfer.types not set after event.dataTransfer.setData(mimeType, angular.toJson(item)) in chrome在 Chrome 中的 event.dataTransfer.setData(mimeType, angular.toJson(item)) 之后未设置 HTML5 DragDrop dataTransfer.types
【发布时间】：2017-04-13 11:51:27
【问题描述】：

我正在使用 druska/native_js_drag_and_drop_helper.js 自动化 angular-drag-and-drop-lists

问题： 即使在event.dataTransfer.setData(mimeType,angular.toJson(item)) 之后

dataTransfer.types 未设置或可能不允许在拖放事件中读取

观察：在手动拖放dragstart事件期间

dataTransfer {dropEffect: "none", effectAllowed: "move", items: DataTransferItemList, types: Array(1), files: FileList}
    dropEffect:"move"
    effectAllowed:"move"
    files:FileList
    items:DataTransferItemList
    types:Array(0)
    __proto__:DataTransfer

DataTransferItemList {0: DataTransferItem, length: 1}
    length: 0
    __proto__: DataTransferItemList

 DataTransferItem {kind: "string", type: "application/x-dnd"}
    kind: ""type: ""
    __proto__: DataTransferItem

观察：使用自定义事件时

dataTransfer:Object
    data:Object
        application/x-dnd:"[{"id":"706","title":"Ab 2","drag":false,"selected":true}]"
        __proto__:Object
    dropEffect:"move"
    effectAllowed:"move"
    getData:function (type)
    setData:function (type,val)
    files:Object
    items:Object
    types:Array(0)

我正在使用

var event = new CustomEvent("CustomEvent", {"cancelable": true})
        event.initCustomEvent(type, true, true, null);
        event.dataTransfer = {
            data: {
            },
            setData: function(type,val) {
                this.data[type] = val
            },
            getData: function(type) {
                return this.data[type]
            },
            dropEffect: 'move',
            effectAllowed:'move',
            types: [],
            items:{},
            files:{}


        }

我无法初始化 dataTransfer 对象。 dataTransfer.items 和 dataTransfer.types 是只读属性，我不知道如何正确初始化它们。MDN dataTransfer

【问题讨论】：

How to automate angular-drag-and-drop-lists的可能重复

标签： drag-and-drop dom-events custom-events angulardraganddroplists

【解决方案1】：

问题是 setData dint 具有设置 DataTransfer.types 的代码，该代码在拖放期间由 angular-drag-and-drop-lists 使用。

        setData: function(type,val) {
            this.data[type] = val
            this.types[0] = type
        }

以上更改修复了问题。现在使用本机 js 拖放工作正常

【讨论】：