jquery html 5 dragstart .on('dragstart',function(e){}) e.dataTransfer.setData() 不起作用答案

【问题标题】：jquery html 5 dragstart .on('dragstart',function(e){}) e.dataTransfer.setData() doesn't workjquery html 5 dragstart .on('dragstart',function(e){}) e.dataTransfer.setData() 不起作用
【发布时间】：2012-12-06 15:07:40
【问题描述】：

chrome throw err：无法调用未定义的方法“setData”，我发现 e 不等于 window.event（它没有属性 dataTransfer）；两者有很大的不同

我发现两者在点击事件中几乎相等。

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

我不使用拖动功能，我只是想知道为什么。它是 html 5 中的新功能，jquery 还在后面吗？还是 jquery 团队不想支持它？？或其他原因

【问题讨论】：

您能否提供一个您使用的代码示例？

标签： javascript jquery html drag

【解决方案1】：

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

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

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

【讨论】：

非常感谢。为什么 jQuery 不只是回调原生事件
@zsytssk 这样做是为了提供跨浏览器可预测的内容和行为。阅读此api.jquery.com/category/events/event-object
如果页面中不包含 jQuery，event.dataTransfer.setData() 会起作用
@rizwaniqbal，是的，因为它是本机事件对象上的一种方法。虽然，您必须使用“addEventListener”方法或“ondragstart”属性将“dragstart”事件侦听器添加到元素。见developer.mozilla.org/en-US/docs/DragDrop/…。

【解决方案2】：

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

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

【讨论】：