使用jQuery绑定本地的html5 dragstart事件处理程序并访问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未定义' 的错误信息。我的浏览器是 FireFox 10.0.2。

是否有可能用jQuery这种方式使用dataTransfer呢？

- Simon

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事件对象没有dataTransfer属性。

- robertc

---

这种方法有多兼容？你所做的只是附加了“originalEvent”，对吗？谢谢。 - tundoopani

我对jQuery非常陌生，但是当你在bind函数的末尾添加false时，它会阻止我拖动。移除false后一切都按预期工作。 - Andrew Hoos

Answer 2

jQuery 事件对象没有 dataTransfer 属性... 确实如此，但是可以尝试:

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

kr, zara

- user1875278

---

它具体是做什么的？解释一下会使这个答案更有用。 - fuxia

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