Что такое drag & drop?

С помощью новой модели событий в языке JavaScript, 1.2 и механизма слоев мы можем реализовать на нашей web-странице схему drag & drop («перетащил и оставил»).

Что такое drag & drop? Например, некоторые операционные системы позволяют Вам стирать файлы, просто перетаскивая их в мусорную карзину. Иными словами, Вы щелкаете клавишей мыши над изображением файла, перетаскиваете его (то есть держите клавишу нажатой и просто двигаете мышь) — drag — в мусорную карзину, а затем отпускаете — drop — его там.
Механизм drag & drop, который мы хотим здесь реализовать, ограничивается web-страницей. Поэтому Вы не можете использовать представленный здесь код, чтобы переносить объекты с HTML-страницы на жесткий диск вашего компьютера или другие подобные действия. (Начиная с версии 4.0 браузера Netscape Navigator ваш скрипт может реагировать на событие с названием DragDrop, событие, когда кто-либо перетаскивает файл на окно вашего браузера. Но это не совсем то, о чем мы здесь хотим поговорить).

Язык JavaScript не поддерживает напрямую механизм drag & drop. Это значит, что у нас нет возможности назначить объекту image свойство dragable (перемещаемый) или что-либо в этом роде. Поэтому мы должны сами писать необходимый для этого код. Впрочем, Вы увидите, что это не так сложно.
Итак, то же нам нужно? Нам нужны две вещи. Во-вервых, мы должны регистрировать определенные события, связанные с работой мышью, то есть нужно понять, каким образом, мы сможем узнать, какой объект необходимо переместить и на какую позицию? Затем нам нужно подумать, каким именно образом мы сможем показывать перемещение объектов по экрану. Конечно же, мы будем пользоваться такой новой возможностью языка, как слои, при создании объектов и перемещении их по экрану. Каждый объект представлен собственным слоем.

Организовать перенос элементов по странице — довольно просто. Для этого нужно:

  1. При помощи события mouseDown отследить клик на переносимом элементе
  2. При каждом движении мыши в обработчике события mouseMove передвигать переносимый элемент по странице.
  3. При отпускании кнопки мыши, то есть наступлении события mouseUp — остановить перенос элемента и произвести все действия, связанные с окончанием drag and drop.

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

Для этого будем использовать свойства which и pageX/pageY.

which
кнопка мыши — 1: левая, 2: средняя, 3: правая
pageX/pageY
координаты курсора относительно верхнего-левого угла документа (с учетом прокрутки)

Кроссбраузерно ставить эти свойства на объект будет функция fixEvent:

01 function fixEvent(e) {
02     // получить объект событие для IE
03     e = e || window.event
04   
05     // добавить pageX/pageY для IE
06     if ( e.pageX == null && e.clientX != null ) {
07         var html = document.documentElement
08         var body = document.body
09         e.pageX = e.clientX + (html && html.scrollLeft || body && body.scrollLeft || 0) - (html.clientLeft || 0)
10         e.pageY = e.clientY + (html && html.scrollTop || body && body.scrollTop || 0) - (html.clientTop || 0)
11     }
12   
13     // добавить which для IE
14     if (!e.which && e.button) {
15         e.which = e.button & 1 ? 1 : ( e.button & 2 ? 3 : ( e.button & 4 ? 2 : 0 ) )
16     }
17   
18     return e
19 }

В этом коде e.which проходит кросс-браузерную обработку, чтобы корректно отражать нажатую кнопку мыши.

На демке ниже обработчик mouseMove отслеживает координаты курсора мыши относительно левого-верхнего угла страницы, используя кроссбраузерную обертку fixEvent.

1 document.onmousemove = mouseMove
2   
3 function mouseMove(event){ 
4     event = fixEvent(event)
5     document.getElementById('mouseX').value = event.pageX
6     document.getElementById('mouseY').value = event.pageY
7 }


Координата X:

Координата Y:

Рубрика: Drag & Drop

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

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