Aplică OOP tragere n drop-

Recomandat de lectură capitolul specificat înainte de a trece mai departe.

În aplicații complexe Drag'n'Drop are un număr de caracteristici:

DragZone trageți elemente din zona de transfer-țintă în zona dropTarget. În această zonă în sine nu este transferat.

De exemplu, - cele două liste, aveți nevoie de un transfer de celule de la unul la altul. În acest caz, lista este o zonă de transfer, a doua zonă --purpose.

Este posibil ca transferul are loc în aceeași listă. Astfel, dragZone == dropTarget.

Pe pagina, pot exista mai multe zone diferite de transport și a zonelor de obiective.

prelucrare finalizare de transfer poate fi asincron cu serverul de notificare.

Ar trebui să fie ușor să adăugați un nou tip de zone de transport sau a zonei țintă, precum și extinde comportamentul existent.

Cadrul pentru transferul ar trebui să fie prelungită, luând în considerare scenarii complexe.

Toate acestea sunt destul de realizabil. Dar acest cadru este descris în articolul mouse-ul: Drag'n'Drop mai profund. Trebuie să refactor și împărțiți de către entitate.

Vor fi 4 persoane:

Pe aspect de pagină de mai jos se poate transfera elevii din lista din partea stângă - la dreapta, una dintre echipe sau „coș“:

Aici este lista de ListDragZone zona de transfer din stânga. o listă de reguli - un ListDropTarget zone putine goluri. Mai mult decât atât, coșul este, de asemenea, un scop de zone specifice de tip RemoveDropTarget.

În această lucrare, vom pune în aplicare un exemplu în care nodurile de copac poate fi mutat în interiorul acestuia. Adică, un copac care este în același timp și TreeDragZone TreeDropTarget.

Structura arborelui va consta din liste imbricate cu un antet în SPAN:

Datoria dragManager - manipulare evenimente mouse-ul și coordonarea tuturor celorlalte entități în procesul de transfer.

Codul de mai jos ar trebui să fie evident în sensul dacă ați citit articolul precedent. Obiectul este scos, și scoase din ea funcționalitatea suplimentară, care sa mutat la alte entități.

În cazul în care a provocat în metodele onDrag * neinteligibil - a se vedea în continuare în descrierea altor obiecte.

Transfer Zona obiect copac, de fapt, nu introduce nimic nou în comparație cu DragZone.

El redefinește doar _makeAvatar pentru a crea TreeDragAvatar.

zona de transfer, pe care a creat-o.

La inițializarea, putem clona, ​​de asemenea, _dragZoneElem. sau pentru a crea punctul dumneavoastră de vedere frumoasă a elementului de transfer și puneți-l în _elem.

Vă rugăm să rețineți, este posibil ca clicul nu a fost pe SPAN din titlu. doar undeva pe copac. În acest caz, initFromEvent returnează false, iar transferul nu va porni.

De regulă, este nevoie de unitate portabilă DropTarget în sine, ci ca un proces de inserție organizat în mod specific - trebuie descrisă într-o clasă derivată. Diferite tipuri de zone fac diferite la inserarea: TreeDropTarget introduce un element ca un copil, și RemoveDropTarget - elimină.

După cum se poate observa din codul de mai sus, DropTarget implicit este preocupat doar cu urmărirea și afișarea „touchdown“. În mod implicit, singurul posibil „punctul de aterizare“ este ea însăși un element al zonei. În situații mai complexe, acesta poate fi un sub-element de.

Pentru utilizare, în realitate, minimul necesar pentru a trece peste rezultatul de procesare în onDragEnd de transfer.

TreeDropTarget conține un cod care este specific pentru copac:

• Transferul o indicație a elementului: metode și _showHoverIndication _hideHoverIndication.
• Pregătirea punctului curent în metoda de aterizare _targetElem _getTargetElem. Ea poate fi doar nodul de antet al arborelui, și verificat de asemenea, că acest lucru nu este descendentul unei unități portabile.
• Procesarea de transfer de succes în onDragEnd. inserarea avatar.dragZoneElem nod sursă la un nod _targetElem corespunzător.

Codul sursă pentru exemplu este în întregime în sandbox.

clase Singleton și dragManager Drag * defini un cadru comun. Acestea sunt moștenite obiecte specifice. Pentru a crea noi zone, este suficientă pentru a moșteni clasele standard și le înlocuiți.

Mini-cadru pentru Drag'n'Drop, care este prezentat aici, este rescris și versiune a unei biblioteci reale actualizate, pe baza cărora a fost creat mai multe script-uri de migrare de succes.

În funcție de nevoile dumneavoastră, puteți extinde, adăugați transferul mai multor obiecte în același timp, să sprijine evenimente și alte caracteristici.

Până în prezent, fiecare cadru serios, există o bibliotecă pentru Drag'n'Drop. Acesta funcționează într-un mod similar, dar pentru a face un transfer universal - nu este un lucru ușor. De multe ori este supraîncărcat cu funcționalitate inutile, sau invers - nu este suficient să se extindă în locurile potrivite. Înțelegerea modului în care poate fi aranjat, ca un exemplu în acest articol, poate ajuta să se adapteze codul existent pentru a se potrivi nevoilor dumneavoastră.