Всичко е drag’n’drop, HTML5 Tutorial

Стандартът HTML5 включва поведение на плъзгане в началото. Той е реализиран от новия атрибут за плъзгане и поредица от събития за всеки етап от действия за преместване на обекти. Има седем от тях:

- dragstart - събитие от началото на плъзгане на обект;

- плъзгане - преместване на обекта;

- dragenter - събитието се задейства, когато влаченият обект уцели целевия обект;

- dragleave - влаченият обект напуска целевия обект;

- dragover - събитието се задейства, когато влаченият обект се движи над целевия обект;

- drop - събитието се извиква, когато обектът, който се премества, удари обекта на приемника и потребителят освободи бутона на мишката;

- dragend - потребителят спира да влачи обекта.

Това е всичко, но нека се опитаме да създадем нещо полезно с този комплект.

На първо място, ние се нуждаем от визуални обекти, което означава html маркиране и свързани стилове. Нека създадем обекти:

Резултатът може да се види на фиг. 78.

Нашата задача е да осигурим възможността да преместваме квадратите с числа вътре в големия правоъгълник в произволен ред (може би това ще бъде нещо като игра или пъзел). Нека започнем с предоставянето на самата възможност за плъзгане и пускане на обекти с мишката (по-нататък ще използваме javascript - рамката jQuery - отново само за намаляване на количеството код):

Същият ефект ще даде

Фигура: 78. Всичко е готово за плъзгане и пускане

Фигура: 79. Започнете да влачите

Няма да спрем дотук - ще се придвижим към целта, използвайки горния модел на събитие. Първо, нека започнем да се движим:

Това. добавете EventListener ('dragstart', handleDragStart, false); >);

Засега нека просто направим плаващия обект полупрозрачен:

Сега нека определим целевата зона на движение. Имаме този div с идентификатора "tr". Нека го оборудваме с манипулатор на събития onDragenter и onDagleave:

Това. addEventListener ('dragenter', handleDragEnter, false); това. addEventListener (‘dragleave’, handleDragLeave, false); >);

Сега нека създадем надклас, който определя целевата област в момента, когато плъзгащият се обект е над него (трябва да бъде "маркиран" само за удобство):

Граница: 2px пунктирана # 000:

Много просто: var inCont = 0; функция handleDragEnter (e) < $(this).addClass(‘over’); return false; inCont = 1;

Сега движението е визуално рамкирано (фиг. 80), но засега това не е особено полезно, трябва реално движение.

Фигура: 80. Нека определим целевата област

---