绑定原生 html5 dragstart 事件处理程序并使用 jQuery 访问 dataTransfer

Posted 2023-05-08

【中文标题】绑定原生 html5 dragstart 事件处理程序并使用 jQuery 访问 dataTransfer

【英文标题】：Bind native html5 dragstart event handler and access dataTransfer using jQuery

【发布时间】：2012-03-22 21:44:10

【问题描述】：

这是有效的：

$(".my_dragging_class").each( makeDraggable($(this).get()[0]) );

var makeDraggable = function (el)
    el.draggable = 'true';
    el.addEventListener('dragstart', function(e)
                e.dataTransfer.effectAllowed = 'move';
                e.dataTransfer.setData('text/html', 'test');
                console.log('dragstart');
                , 
            false);

这不起作用：

$(".my_dragging_class").makeDraggable();

$.fn.makeDraggable()
    $(this).attr('draggable','true');
    $(this).bind('dragstart', function(e)
                e.dataTransfer.effectAllowed = 'move';
                e.dataTransfer.setData('text/html', 'test');
                console.log('dragstart');
                , 
            false);

错误消息：我收到了一行e.dataTransfer.effectAllowed = 'move'; 的'e.dataTransfer is undefined'。我的浏览器是 FireFox 10.0.2

是否可以通过这种方式将 dataTransfer 与 jQuery 一起使用？

【参考方案1】：

试试：

$.fn.makeDraggable()
    $(this).attr('draggable','true');
    $(this).bind('dragstart', function(e)
                e.originalEvent.dataTransfer.effectAllowed = 'move';
                e.originalEvent.dataTransfer.setData('text/html', 'test');
                console.log('dragstart');
                , 
            false);

jQuery event object 没有 dataTransfer 属性。

【讨论】：

这种方法的兼容性如何？你所做的只是附加“originalEvent”，对吧？谢谢。

我对 jQuery 很陌生，但是当您在绑定函数的末尾添加 false 时，它​​会阻止我拖动。删除错误并按预期工作。

【参考方案2】：

jQuery event object 没有 dataTransfer 属性... 是的，但可以尝试：

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

韩国、扎拉

【讨论】：

它到底是做什么的？一个解释将使这个答案更有用。

toscho -> Per: api.jquery.com/category/events/event-object - 某些事件可能具有特定于它们的属性。这些可以作为 event.originalEvent 对象的属性访问。要使所有事件对象中的特殊属性可用，可以将它们添加到 jQuery.event.props 数组中。不推荐这样做，因为它会增加 jQuery 传递的每个事件的开销。