HTML5 拖放 ondragover 在 Chrome 中未触发

发布于 2024-11-17 07:52:32 字数 664 浏览 2 评论 0原文

我这里有一个简单的例子，它在 Chrome 11 中对我来说没有触发 http://jsfiddle.net/G9mJw/ 它由一个非常简单的代码组成：

var dropzone = document.getElementById('dropzone'),
    draggable = document.getElementById('draggable');


function onDragOver(event) {
    var counter = document.getElementById('counter');
    counter.innerText = parseInt(counter.innerText, 10) + 1;
}


dropzone.addEventListener('dragover', onDragOver, false);

它似乎在 safari 中工作正常...但是在 Chrome 中，当红色方块触摸虚线方块时，不会调用 dragover 事件。

我尝试复制一些当前在 chrome 中工作的示例，但它对我也不起作用。

我尝试阻止默认行为以查看它是否有效，但没有成功。任何帮助将不胜感激。

谢谢

原文

I have this simple example here which is not firing in Chrome 11 for me http://jsfiddle.net/G9mJw/ which consists on a very simple code:

var dropzone = document.getElementById('dropzone'),
    draggable = document.getElementById('draggable');


function onDragOver(event) {
    var counter = document.getElementById('counter');
    counter.innerText = parseInt(counter.innerText, 10) + 1;
}


dropzone.addEventListener('dragover', onDragOver, false);

It seems to work fine in safari tho...but in Chrome the dragover event is not being called when the red square touch the dotted one.

I've tried to replicate some examples which have this currently working in chrome but it din't work for me either.

I've tried prevent the default behaviour to see it if worked but it didn't. any help would be very appreciated.

thanks

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

苏璃陌 2024-11-24 07:52:32

似乎需要在 dragstart 事件上为可拖动元素设置一些数据，以便在 dropzone 上触发 dragover 事件。

我已经更新了代码片段 http://jsfiddle.net/G9mJw/20/ 现在可以在铬也是如此。

新代码如下：

var dropzone = document.getElementById('dropzone'),
    draggable = document.getElementById('draggable');


function onDragStart(event) {
    event.dataTransfer.setData('text/html', null); //cannot be empty string
}

function onDragOver(event) {
    var counter = document.getElementById('counter');
    counter.innerText = parseInt(counter.innerText, 10) + 1;
}   

draggable.addEventListener('dragstart', onDragStart, false);
dropzone.addEventListener('dragover', onDragOver, false);

此外还有一些有关其工作原理的更多信息：
https://developer.mozilla.org/En/DragDrop/Drag_Operations#Drag_Data这提到了这样的事情：

当发生拖动时，数据必须与拖动相关联，以标识正在拖动的内容。

这使得更容易理解...
我只是想弄清楚这在 Safari 中如何工作而不需要发送一些数据？或者它可能已经默认发送一些内容？

还有 event.dataTransfer.setData('text/html', null); 方法，奇怪的是不能发送像 event.dataTransfer.setData('text/html', '' ); 否则，dragover 事件将不会被调度。

It seems that it is needed to set some data to the draggable element on the dragstart event for the dragover event to be fired on the dropzone.

I've updated the snippet http://jsfiddle.net/G9mJw/20/ which now works in chrome as well.

and the new code as follows:

var dropzone = document.getElementById('dropzone'),
    draggable = document.getElementById('draggable');


function onDragStart(event) {
    event.dataTransfer.setData('text/html', null); //cannot be empty string
}

function onDragOver(event) {
    var counter = document.getElementById('counter');
    counter.innerText = parseInt(counter.innerText, 10) + 1;
}   

draggable.addEventListener('dragstart', onDragStart, false);
dropzone.addEventListener('dragover', onDragOver, false);

Also there's some more information about how this works at:
https://developer.mozilla.org/En/DragDrop/Drag_Operations#Drag_Data and this mention things like:

When a drag occurs, data must be associated with the drag which identifies what is being dragged.

Which make easier to understand...
I am just trying to figure out how does this works in Safari without the need to send some data? or perhaps it already send some content as default?

Also the event.dataTransfer.setData('text/html', null); method, curiously cannot send an empty string like event.dataTransfer.setData('text/html', ''); otherwise the dragover event will not be dispatched.

回复收藏 0 原文