event.clientX在firefox中显示为0表示dragend事件 [英] event.clientX showing as 0 in firefox for dragend event

问题描述

function move(e,obj,but){
    if(typeof(obj) === 'string'){
        obj = document.getElementById(obj) ;
    }

    if(typeof(but) === 'string'){
        but = document.getElementById(but) ;
    }

    //elementCoord(but) ;//get the current coords of the button &
    elementCoord(obj) ;//the container

    e = e || window.event ;
    var mouseX = e.clientX ;
    var mouseY = e.clientY ;

    //alert('mouseX='+mouseX+', but.XCoord '+but.XCoord) ;
    var diffX = Math.abs(obj.XCoord - mouseX) ;
    var diffY = Math.abs(obj.YCoord - mouseY) ;

    but.addEventListener("dragend",function(evt){
        evt = evt || window.event ;
        mouseX = evt.clientX ;
        mouseY = evt.clientY ;
        obj.style.left = mouseX - diffX + 'px';
        obj.style.top = mouseY - diffY + 'px';
        alert('mouseX='+mouseX+' diffX='+diffX) ;
        }
    ,false) ;

}

来自dragend的警报显示mouseX为零，无论在哪里现在是。这在Chrome中工作得很好，所以不确定我做错了什么。

The alert from dragend is showing mouseX as zero no matter where it is currently. This works fine in Chrome so not sure what im doing wrong.

忘记提及，elementCoord只获取一个对象的偏移量，将其添加为属性。它适用于所有浏览器。

Forgot to mention, elementCoord just gets the offset of an object adding it as a property. It works fine in all browsers.

推荐答案

前几天我遇到了与Firefox相同的问题。

I ran into the same issue with Firefox the other day.

虽然它取决于使用全局变量来存储位置前后的鼠标，但我设法找到了解决方法。

I managed to find a work around although it depends on using a global variable for storing the mouse before and after positions.

位似乎让事情变得有效的方法是从ondrop事件而不是ondragend事件中获取pageX和pageY值。

The bit that seemed to get things working was to get the pageX and pageY values from the ondrop event instead of the ondragend event.

唯一的问题是ondrop不存储拖动的元素或原始鼠标位置（因此需要全局变量）。

The only problem is that the ondrop doesn't store the dragged element or the original mouse positions (hence the need for the global variable).

var dragDetails = {
   target: null,
   orgMouseX: 0,
   orgMouseY: 0,
   desMouseX: 0,
   desMouseY: 0
}

$("targetElement").on("dragstart", function(event) {
   dragDetails.target = this;
   dragDetails.orgMouseX = event.originalEvent.pageX;
   dragDetails.orgMouseY = event.originalEvent.pageY;
});

$("html").on("drop", function(event) {
   dragDetails.desMouseX = event.originalEvent.pageX;
   dragDetails.desMouseY = event.originalEvent.pageY;
   handleDrag();
});

这是一个小提琴的例子： https://jsfiddle.net/L1b6uz2d/2/

Here is an example in a fiddle : https://jsfiddle.net/L1b6uz2d/2/

似乎工作最新Chrome，Firefox，Edge和Internet Explorer的版本（虽然在Internet Explorer上的准确性不是很好），但它适用于Android Chrome。尚未测试任何其他人，我确信代码可以改进。

It seems to work on the latest versions of Chrome, Firefox, Edge and Internet Explorer (the accuracy isn't as good on Internet Explorer though) and it works on Android Chrome. Haven't tested any others yet and I'm sure the code can be improved.

我确实设法让它工作而不需要全局变量但是我有使用ondrop，然后将目标，pageX和pageY作为参数传递给ondragend事件（我没有包含小提琴，因为代码非常难看）

I did manage to get it working without the need for a global variable but I had to use the ondrop and then pass the target, pageX and pageY as parameters to the ondragend event (I didn't include a fiddle because the code was very ugly)

这篇关于event.clientX在firefox中显示为0表示dragend事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！