在Chrome,Safari和Firefox中查看以下jsfiddle.它应该详细解释我所看到的.

总之,drag和dragend事件要么没有x和y值,要么具有奇怪的x和y值.

(见下面粘贴的代码)
http://jsfiddle.net/CgzV3/10/

这些错误是否在浏览器中?
我们可以期望浏览器最终在drag和dragend事件中具有合理的x和y值吗?
我们可以期待FireFox最终支持offsetX和offsetY以及dragenter / dragleave / dragover / drop事件吗?

谢谢,
内特

HTML:

<aside draggable="true" id="dragme">
    Drag Me
</aside>

<aside droppable="true" id="drophere">
    Drop Here
</aside>

<div id="notes">
    Notes:
    <ul>
        <li>drag: In Chrome the x/y values for drag are reasonable as the drag is happening,but then you get some crazy values in the last drag event when
            the element is dropped.</li>
        <li>drag: In Firefox,there are no x/y values in drag events at all</li>
        <li>drag: In Safari,the x/y values in drag events seem reasonable</li>
        <li>dragend: In Chrome,the x/y values in dragend are just strange.  The screenX/screenY values seem to be almost accurate,except they are offset by the distance from the bottom left corner of the dragged element to the place where the dragged element was grabbed.</li>
        <li>dragend: In Safari,the x/y values in the dragend seem to all be relevant to the outer window,not the iframe (which exists since this is inside jsfiddle.  This is different from the dragstart event,which sets all the x/y values (except for screenX/screenY) relative to the iframe</li>
        <li>dragend: In Firefox,there is only screenX/y,and it seems right.</li>
        <li>dragenter/dragover/dragleave/drop: Seem good in Chrome/Safari/FireFox except that FireFox does not have offsetX/Y values</li>
    </ul>
</div>

JavaScript的:

function setCell(eventType,label,x,y) {
    var row = ['','dragstart','drag','dragend','','dragenter','dragover','dragleave','drop'].indexOf(eventType);
    var cell = ['','client','page','screen','offset'].indexOf(label);
    var val = [x,y].join('/');
    document.getElementsByTagName('table')[0].rows[row].cells[cell].textContent = val; 
}

function setRow(evt) {
    var eventType = evt.type;
    setCell(eventType,evt.clientX,evt.clientY);
    setCell(eventType,evt.pageX,evt.pageY);
    setCell(eventType,evt.screenX,evt.screenY);
    setCell(eventType,'offset',evt.offsetX,evt.offsetY);
}

function dragstart(evt){
    // FF needs this
    evt.dataTransfer.setData("text/plain","asd");
    setRow(evt);
}

function dragover(evt){
    evt.preventDefault();
    if (evt.stopPropagation) evt.stopPropagation();
    setRow(evt);
}

function drop(evt) {
    console.log(evt.stopPropagation);
    if(evt.preventDefault) evt.preventDefault();
    if (evt.stopPropagation) evt.stopPropagation();
    setRow(evt);
}


var dragme = document.getElementById('dragme'); 
dragme.addEventListener('dragstart',dragstart,false); 
dragme.addEventListener('drag',setRow,false); 
dragme.addEventListener('dragend',false); 
drophere.addEventListener('dragenter',false); 
drophere.addEventListener('dragover',dragover,false); 
drophere.addEventListener('dragleave',false); 
drophere.addEventListener('drop',drop,false);

解决方法

截至2016年2月,我在Windows7上的FireFox中的结果不一致.我正在使用拖放来重新定位网页上的控件.它适用于Windows7上的FireFox v42,v43和v44:

问题是dragEnd():

> event.screenX和event.screenY的值太大. dragStart()值是正确的.其他测试的机器没有这个问题.
> event.clientX和event.clientY始终为0.我相信这对FF来说是正常的.
> event.offsetY不可靠.通常,它是y drop坐标的负值.例如,如果y计算为100,FF将event.offsetY设置为-100.如果我使用 – (event.offsetY)来定位控件,那么它将始终在100到110的范围内.这非常奇怪,但不是很大,因为event.screenX / Y是其中的关键变量.

开发机器是Windows8,它适用于Chrome,FF,IE和Opera.在FF和其他人使用的任何系统上对LXDE进行了成功测试.

它是一个个人项目和Windows 7计算机是我们的媒体服务器,所以周围没什么大不了的,但非常奇怪.

html5拖动事件中的X和Y值在不同浏览器中不一致的更多相关文章

  1. 使用HTML5做的导航条详细步骤

    这篇文章主要介绍了用HTML5做的导航条详细步骤,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  2. 详解HTML5中的picture元素响应式处理图片

    这篇文章主要介绍了详解HTML5中的picture元素响应式处理图片,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  3. html5利用canvas实现颜色容差抠图功能

    这篇文章主要介绍了html5利用canvas实现颜色容差抠图功能,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

  4. HTML5拖拽功能实现的拼图游戏

    本文通过实例代码给大家介绍了HTML5拖拽功能实现的拼图游戏,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧

  5. HTML5实现直播间评论滚动效果的代码

    这篇文章主要介绍了HTML5实现直播间评论滚动效果的代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  6. 使用Html5多媒体实现微信语音功能

    这篇文章主要介绍了使用Html5多媒体实现微信语音功能,需要的朋友可以参考下

  7. HTML5 播放 RTSP 视频的实例代码

    目前大多数网络摄像头都是通过 RTSP 协议传输视频流的,但是 HTML 并不标准支持 RTSP 流。本文重点给大家介绍HTML5 播放 RTSP 视频的实例代码,需要的朋友参考下吧

  8. html5 拖拽及用 js 实现拖拽功能的示例代码

    这篇文章主要介绍了html5 拖拽及用 js 实现拖拽,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  9. HTML5自定义视频播放器源码

    这篇文章主要介绍了HTML5自定义视频播放器源码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

  10. HTML5新增form控件和表单属性实例代码详解

    这篇文章主要介绍了HTML5新增form控件和表单属性实例代码详解,需要的朋友可以参考下

随机推荐

  1. 微信小程序canvas实现水平、垂直居中效果

    这篇文章主要介绍了小程序中canvas实现水平、垂直居中效果,本文图文实例代码相结合给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

  2. 使用HTML5做的导航条详细步骤

    这篇文章主要介绍了用HTML5做的导航条详细步骤,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  3. H5最强接口之canvas实现动态图形功能

    这篇文章主要介绍了H5最强接口之canvas实现动态图形功能,需要的朋友可以参考下

  4. Canvas高级路径操作之拖拽对象的实现

    这篇文章主要介绍了Canvas高级路径操作之拖拽对象的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  5. html5视频自动横过来自适应页面且点击播放功能的实现

    这篇文章主要介绍了h5视频自动横过来自适应页面且点击播放,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  6. 详解HTML5中的picture元素响应式处理图片

    这篇文章主要介绍了详解HTML5中的picture元素响应式处理图片,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  7. canvas像素点操作之视频绿幕抠图

    这篇文章主要介绍了canvas像素点操作之视频绿幕抠图的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  8. html5利用canvas实现颜色容差抠图功能

    这篇文章主要介绍了html5利用canvas实现颜色容差抠图功能,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

  9. canvas绘制视频封面的方法

    这篇文章主要介绍了canvas绘制视频封面的方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  10. HTML5拖拽功能实现的拼图游戏

    本文通过实例代码给大家介绍了HTML5拖拽功能实现的拼图游戏,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧

返回
顶部