jQuery HTML 5拖拽事件dragstart的问题：.on('dragstart',function(e){})中使用e.dataTransfer.setData()无效。

Question

Chrome抛出错误：无法调用未定义的“setData”方法， 我发现e不等于window.event（它没有dataTransfer属性）；两者差异很大。

我发现在click事件中它们几乎相等。

我使用了http://code.jquery.com/jquery-latest.js。

我不使用拖动功能，只是想知道为什么。 它是HTML5中的新功能，jQuery还没有跟上吗？ 或者jQuery团队不想支持它？还是其他原因。

- zsytssk

---

请问您能否提供一下您正在使用的代码示例？ - PhearOfRayne

Answer 1

在回调函数中，您将获得一个jQuery包装器，该包装器覆盖了原生事件。使用传递的参数的 originalEvent 属性：

$('...').on('dragstart', function (event) {
    event.originalEvent.dataTransfer.setData('...', '...');
});

提示：不要忘记为要拖动的元素设置 draggable="true" 属性。

- John Doe

---

非常感谢您。为什么jQuery不直接回调本地事件？ - zsytssk

@zsytssk 这是为了提供跨浏览器可预测的内容和行为。请阅读此链接：http://api.jquery.com/category/events/event-object/ - John Doe

如果页面上没有包含jQuery，那么event.dataTransfer.setData()会起作用吗？ - automaticAllDramatic

@rizwaniqbal，是的，因为它是本地事件对象上的一个方法。不过，你需要使用'addEventListener'方法或者'ondragstart'属性将'dragstart'事件监听器添加到元素中。请参考https://developer.mozilla.org/en-US/docs/DragDrop/Recommended_Drag_Types。 - John Doe

Answer 2

jQuery会创建自己的事件对象，但它还没有dataTransfer属性。这将向事件对象添加dataTransfer。

$.event.props.push('dataTransfer');

- two7s_clash