Отслеживаем клик на объекте переноса

Чтобы начать перенос элемента, мы должны отловить нажатие кнопки мыши на объекте.

Для этого нам пригодится событие mousedown. Повесим обработчик на те элементы, которые хотим сделать доступными для переноса.

Пока этот обработчик будет запоминать объект в глобальной переменной dragObject

1 element.onmousedown = function(e){
2 // запомнить переносимый объект
3 // в переменной dragObject
4 dragObject = this
5
6 // остановить обработку события
7 return false
8 }

Остановить обработку события return false очень важно — иначе браузер может запустить свои механизмы перетаскивания элементов и все нам поломать.

В случае с отпусканием кнопки мыши все проще — объект мы уже знаем, так что можно повесить один обработчик onmouseup на document.

1 document.onmouseup = function() {
2 // опустить переносимый объект
3 dragObject = null
4 }
Одно из самых очевидных применений drag’n’drop — переупорядочение данных. Это могут быть блоки, элементы списка, и вообще — любые DOM-элементы и их наборы.Перенос мышкой может заменить целую последовательность кликов. И, самое главное, он упрощает внешний вид интерфейса: функции, реализуемые через drag’n’drop, в ином случае потребовали бы дополнительных полей, виджетов и т.п.Чтобы начать перенос элемента, мы должны отловить нажатие кнопки мыши на объекте.

Для этого нам пригодится событие mousedown. Повесим обработчик на те элементы, которые хотим сделать доступными для переноса.

Пока этот обработчик будет запоминать объект в глобальной переменной dragObject

element.onmousedown = function(e){
2     // запомнить переносимый объект 
3     // в переменной dragObject
4     dragObject  = this
5   
6     // остановить обработку события
7     return false
8 }

Остановить обработку события return false очень важно — иначе браузер может запустить свои механизмы перетаскивания элементов и все нам поломать.

В случае с отпусканием кнопки мыши все проще — объект мы уже знаем, так что можно повесить один обработчик onmouseup на document.

1 document.onmouseup = function() {
2     // опустить переносимый объект
3     dragObject = null
4
 

 }

При таком способе задания объекта dragMaster получает публичные свойства (например, makeDraggable), которые имеют доступ к приватным переменным и методам mouse*, dragObject, так как являются вложенными функциями.

Полученный код:

  1. Не загрязняет глобальную область видимости переменными типа dragObject.
  2. Дает единый объект-синглтон dragMaster, управляющий переносом.
  3. Приватные переменные хорошо сжимаются javascript-компрессором, что убыстряет и уменьшает код.

Последний пункт очень важен, так как обработчики mouseMove, mouseUp вызываются при каждом передвижении мыши и поднятии кнопки соответственно. Если mouseMove будет работать медленно, то передвижение курсора станет рваным, заметно тормозным.

На это натыкались многие писатели drag’n’drop приложений. Мы же будем изначально закладывать производительность во все критические участки кода.

Пример можно посмотреть тут.

Исходный код:

<html>
<head>
<!— Приведенный ниже код заключается между тегами <head>…</head> —>
<script language=»JavaScript»>
flg = (document.all) ? 0 : 1;
var obj;
function mousedown(ev)
{
 if (flg)
 {
  obj = document.layers[ev.target.name];
  X=ev.x;
  Y=ev.y;
  return false;
 }
 else
 {
  obj = event.srcElement.parentElement.style;
  X=event.offsetX;
  Y=event.offsetY;
 }
}
function mousemove(ev)
{
 if (obj)
 {
  if (flg)
  {
   obj.moveTo((ev.pageX-X), (ev.pageY-Y));
  }
  else
  {
   obj.pixelLeft = event.clientX-X + document.body.scrollLeft;
   obj.pixelTop = event.clientY-Y + document.body.scrollTop;
   return false;
  }
 }
}
function mouseup()
{
 obj = null;
}
if (flg)
{
  document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
}
document.onmousedown = mousedown;
document.onmousemove = mousemove;
document.onmouseup = mouseup;
</script>

</head>
<body>
   <div id=»d» style=»position:absolute;left:90;top:100;»><img src=»piki.gif» name=»d»></div>
   <div id=»e» style=»position:absolute;left:90;top:150;»><img src=»bubi.gif» name=»e»></div>
   <div id=»f» style=»position:absolute;left:150;top:100;»><img src=»trefi.gif» name=»f»></div>
   <div id=»j» style=»position:absolute;left:150;top:150;»><img src=»chervi.gif» name=»j»></div>
</body>
</html> 

Рубрика: Drag & Drop

Добавить комментарий

Вам надо войти, чтобы написать комментарий.