Event.clientX показывает как 0 в firefox для события dragend

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, поэтому не уверен, что я делаю неправильно.

Забыв упомянуть, elementCoord просто получает смещение объекта, добавляя его как свойство. Он отлично работает во всех браузерах.

Ответ 1

Не используйте e.clientX или e.clientY

Вместо этого используйте e.pageX и e.pageY или e.targetTouches [0].pageX e.targetTouches [0].pageY (для сенсорных экранов).

pageX ссылается на документ, clientX на область просмотра. Смотрите также:

https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/pageX https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientX

Ответ 2

Я столкнулся с той же проблемой с Firefox на днях.

Мне удалось найти обходной путь, хотя это зависит от использования глобальной переменной для хранения мыши до и после позиций.

Казалось, что работало то, что нужно получать значения pageX и pageY из события ondrop вместо события ondragend.

Единственная проблема заключается в том, что ondrop не хранит перетаскиваемый элемент или исходные позиции мыши (отсюда и необходимость в глобальной переменной).

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/

Похоже, что он работает на последних версиях Chrome, Firefox, Edge и Internet Explorer (точность не так хороша в Internet Explorer, хотя) и работает на Android Chrome. Еще не тестировал другие, и я уверен, что код можно улучшить.

Мне удалось заставить его работать без необходимости использования глобальной переменной, но мне пришлось использовать ondrop, а затем передать target, pageX и pageY в качестве параметров событию ondragend (я не включил скрипку, потому что код был очень уродливым )

Ответ 3

document.addEventListener("dragover", function( event ) { event.preventDefault(); console.log(event.pageX) }, false);

добавить console.log(event.pageX) в Dragover Listenerhttp://jsfiddle.net/zfnj5rv4/