Как заставить clientX и clientY работать внутри моего обработчика событий «перетаскивания» в Firefox?

Question

Mozilla firefox 3.x, похоже, содержит ошибку при прослушивании события "ondrag". Объект события не сообщает о положении перетаскиваемого объекта, clientX, clientY и другие смещения экрана устанавливаются на ноль. Это довольно проблематично, так как я хотел создать прокси-элемент на основе перетаскиваемого элемента и, конечно, с помощью clientX и clientY, чтобы отрегулировать его положение.

Я знаю, что в HTML5 есть такие интересные вещи, как setDragImage, но я хочу предоставить общую абстракцию для нативного DD между браузерами.

Неисправный код:

document.addEventListener('drag', function(e) {
    console.log(e.clientX); // always Zero
}, false);

Примечание: Эта проблема не возникает в других событиях (dragstart, dragover), и события перемещения мыши не могут быть записаны при перетаскивании чего-либо.

Пожалуйста, помогите!

Answer 1

Я нашел решение, я поместил слушателя на событие "dragover" на уровне документа, теперь я получаю правильные свойства X и Y, которые я могу предоставить через глобально общий объект.

Answer 2

Событие перетаскивания в HTML 5 не полностью функционально в современных браузерах. Для имитации ситуации перетаскивания вы должны использовать:

1. Добавить событие onmousedown, установив переменную true.
2. Добавьте событие onmouseup, установив, что var false.
3. Добавьте событие onmousemove, проверив, является ли эта переменная true, и, если это так, переместите ваш div в соответствии с координатами.

Это всегда работало для меня. Если у вас возникнут какие-либо проблемы, свяжитесь снова, я могу привести несколько примеров.

удачи!

Answer 3

Я знаю, что вокруг есть классные вещи такие как setDragImage в HTML5, но я хочу предоставить общую абстракцию для собственного DD между браузерами.

Но зачем делать что-то подобное, разве нет таких библиотек, как JQuery & Prototype , доступных для сквозного перетаскивания из браузера?

Или, если вы хотите реализовать собственную библиотеку DD, вы можете воспользоваться их методами или расширить их, поскольку обе библиотеки следуют объектно-ориентированной парадигме.

Это сэкономит много времени.