Теряется event при перемещении объекта (Drag&Drop)
Есть такая функция в классе которая срабатывает при клике мышки
this.init = function() { var self = this; this.item.onmousedown = function() { self.setup(); } } this.setup = function() { var event = window.event; } Но если быстро перемещать объект по экрану то теряется событие. Объект остается на месте, мышка уходит в сторону. |
Во-первых, window.event есть только у IE, поэтому в других браузерах у тебя события не будет вообще.
Во-вторых, какое именно событие теряется ? |
Я неправильно делаю, поэтому вот с вопросами :)
я увидел где то такое примерно function setup(e) { var e = window.event || e; } А событие теряется может я неправильно назвал, сама проблема в том что когда начинаю перемещать объект по экрану, то часто объект остается на месте, а курсор мышки идет дальше. И теряется событие onmouseup при этом |
Если нужно могу привести полный код, там немного
|
Приведи, пожалуйста..
|
function dhtmlDrag() { this.init = function(item) { this.object = item; this.obj = item.obj; this.parent = item.obj.parentNode; // Клонируем объект this.clone(); var self = this; this.item.onmousedown = function(e) { if(typeof e == "undefined") { e = event; } self.setup(e); } } this.distance = function(e) { this.distancex = e.clientX - this.initmousex; this.distancey = e.clientY - this.initmousey; this.move(e); } this.move = function(e) { var left = this.distancex + this.initx; var top = this.distancey + this.inity; this.item.style.left = left + "px"; this.item.style.top = top + "px"; } this.setup = function(e) { // Задаем класс this.item.className = 'file_item_clone file_item_show'; this.initmousex = e.clientX; this.initmousey = e.clientY; this.initx = this.item.offsetLeft; this.inity = this.item.offsetTop; var self = this; this.item.onmousemove = function(e) { if(typeof e == "undefined") { e = event; } self.distance(e); } this.item.onmouseup = function(e) { if(typeof e == "undefined") { e = event; } self.stop(e); } } this.stop = function(e) { e.onmousemove = null; e.onmouseup = null; // Задаем класс this.item.className = 'file_item_clone file_item_hidden'; // Указываем позицию объекту this.item.style.top = this.pos.top - 5 + 'px'; this.item.style.left = this.pos.left - 4 + 'px'; } this.clone = function() { // Получаем позицию оригинала this.pos = this.getObjectPosition(this.obj); // Клонируем объект this.item = this.obj.cloneNode(true); // Задаем класс this.item.className = 'file_item_clone file_item_hidden'; // Указываем позицию объекту this.item.style.top = this.pos.top - 5 + 'px'; this.item.style.left = this.pos.left - 4 + 'px'; this.obj.parentNode.parentNode.appendChild(this.item); } // Получение позиции объекта this.getObjectPosition = function(obj) { var position = { left:0, top:0 }; while (obj) { position.left += obj.offsetLeft; position.top += obj.offsetTop; obj = obj.offsetParent; } return position; } } |
Кажится начинаю понимать
не this.item.onmousemove = function(e) а document.onmousemove = function(e) |
Ага =) И up/down то же самое..
|
Все получилось, но единственное, когда начинаю только кликать и пытаться тянуть объект, то у меня появляется плюс возле курсора, и картинка открывается в новом окне
|
Из за чего такой баг может возникать?
|
Потому что ты не остановил событие. В обработчике надо после обработки
e.preventDefault(); e.stopPropagation(); |
Не соображу, а это куда? после чего именно?
|
В обработчик события в конце.
Эти строчки убирают реакцию браузера на событие, предотвращают bubbling. |
Я просто не пойму события чего, onmousemove, onmouseup и т.д.
|
Все разобрался, работает замечательно.
Спасибо! |
не знаю может тему новую надо было создать, но вот такая проблема.
Как реализовать drag & drop в полном его объеме. тоесть, как сам объект перемешать, я научился, а вот немогу найти примера как принимать какой либо областью перемещаемый объект. чтобы перемещаемый объект не выходил за границы заданной области. |
dizews: создай, пожалуйста, новую тему, и там поговорим.
|
Часовой пояс GMT +3, время: 10:07. |