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

Question

这是有效的：

$(".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 一起使用？

Answer 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 属性。

Answer 2

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

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

韩国、扎拉