Буксировка (перетаскивание) DIV на JavaScript
Когда у меня возникла необходимость в перетаскивании картинки по html странице я не мог найти готового, а главное универсального решения для реализации этой задачи. Поэтому посидев немного за аналоговыми источниками информации у меня получилось реализовать следующий скрипт, который надеюсь пригодится и вам.Главная проблема при реализации этого скрипта была в том, что при перетаскивании DIV содержащего картинку перестает инициироваться событие onMouseMove из-за обработчика события поумолчанию, справиться с этой проблемой мне помогли методы класса Event: event.stopPropagation() и event.preventDefault(). Первый метод запрещает распространение события дальше по дереву тэгов, а второй отменяет обработчик события поумолчанию, но это будет работать в браузерах поддерживающих DOM, для остальных же аналогом этих методов будет: event.cancelBubble = true и event.returnValue = false. Итак, в итоге имеем, что при написании обработчика события onMouseMove и onMouseDown для перетаскиваемого объекта в него надо вставить следующий код:
if(event.stopPropagation) event.stopPropagation();
else event.cancelBubble = true;
if(event.preventDefault) event.preventDefault();
else event.returnValue = false;
Следующей загвоздкой стало получение объекта Event. Если в IE к нему можно обратиться просто window.event, то в Netscape он передается в качестве параметра функции обработчика события, решение проблемы выглядит следующим образом:
<script type="text/javascript">
function method(e){
if(!e) e = window.event;
...
}
</script>
<div onMouseMove="method(event)"></div>
Дальше все дело техники. Обрабатывем событие onMouseDown где ставим признак, что перетаскивание началось и вычисляем смещение левого верхнего угла DIV относительно позиции мыши. Обрабатывем событие onMouseUp, где снимаем признак перетаскивания. В обработчике onMouseMove проверяем наличие этого признака и мы готовы к перетаскиванию. В этом нам поможет CSS: аттрибут position должен принимать значение absolute, а также задаем координаты левого верхнего угла DIV используя аттрибуты top и left.
<script type="text/javascript">
var flag=false;
var shift_x;
var shift_y;
function start_drag(itemToMove,e){
if(!e) e = window.event;
flag=true;
shift_x = e.clientX-parseInt(itemToMove.style.left);
shift_y = e.clientY-parseInt(itemToMove.style.top);
if(e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
if(e.preventDefault) e.preventDefault();
else e.returnValue = false;
}
function end_drag(){ flag=false; }
function dragIt(itemToMove,e){
if(!flag) return;
if(!e) e = window.event;
itemToMove.style.left = (e.clientX-shift_x) + "px";
itemToMove.style.top = (e.clientY-shift_y) + "px";
if(e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
if(e.preventDefault) e.preventDefault();
else e.returnValue = false;
}
</script>
<div style="position:absolute; left:5px; top:5px;" onMouseDown="start_drag(this,event)" onMouseUp="end_drag()" onMouseMove="dragIt(this,event)">
<img src="image.png">
</div>
посмотреть пример работы скрипта
