Enyo.js拖拽应用开发报错：inEvent.dataTransfer.setData未定义

嘿，我完全懂你碰到的这个坑！在Enyo.js里直接用传入的事件对象调用dataTransfer会报错，核心原因是Enyo对原生DOM事件做了一层封装，咱们得先拿到真正的原生事件实例才行！

问题根源 #

Enyo在处理事件时，会把原生的DOM拖拽事件包装成一个自定义的Enyo事件对象。你需要的dataTransfer属性只存在于原生拖拽事件对象中，也就是Enyo事件对象的originalEvent属性里。你现在直接访问inEvent.dataTransfer，自然会得到undefined。

修改后的代码 #

只需要在事件处理函数里先获取原生事件对象，再调用dataTransfer相关方法即可，下面是调整后的完整事件处理代码：

dragStart: function(inEvent) {
    console.log("Started");
    console.log(inEvent);
    // 先拿到Enyo封装的原生事件对象
    const nativeDragEvent = inEvent.originalEvent;
    // 调用原生事件的dataTransfer方法
    nativeDragEvent.dataTransfer.setData("text", nativeDragEvent.target.id);
},
drag: function(inEvent) {
    console.log("Dragging");
    // 统一用原生事件调用preventDefault
    inEvent.originalEvent.preventDefault();
},
drop: function(inEvent) {
    console.log("Dropped");
    const nativeDropEvent = inEvent.originalEvent;
    nativeDropEvent.preventDefault();
    var data = nativeDropEvent.dataTransfer.getData("text");
    nativeDropEvent.target.appendChild(document.getElementById(data));
}

额外注意事项 #

• 确保你的Square和Circle组件对应的DOM元素开启了拖拽功能：可以在组件配置里添加attributes: { draggable: true }，或者在组件的create方法中执行this.setAttribute('draggable', true);，不然拖拽事件根本不会触发。
• 确认nativeDragEvent.target.id有实际值，不然setData存储的是空字符串，后续getData也拿不到有效内容。
• Enyo事件系统里，大部分原生DOM事件的属性和方法都需要通过originalEvent来访问，这是和原生开发的关键区别~

内容的提问来源于stack exchange，提问作者Nikki Rae