Glisați și plasați în HTML - Exemplu pentru a efectua drag and drop in HTML

• Introducere în drag and drop in HTML
• 
Drag and Drop Demo
function allowDrop(ev) (
ev.preventDefault();
)
function dragStart(ev) (
ev.dataTransfer.setData("text", ev.target.id);
)
function dragDrop(ev) (
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
)

#box (
margin: auto;
width: 30%;
width: 21%;
height:150px;
border: 2px solid blue;
padding: 2px;
)
#square1, #square2, #square3 (
float: left;
margin: 5px;
padding: 10px;
)
#square1 (
width: 30px;
height: 30px;
background-color: #BEA7CC;
)
#square2 (
width: 60px;
height: 60px;
background-color: #B5D5F5;
)
#square3 (
width: 90px;
height: 90px;
background-color:#F5B5C5 ;
)
h2 (
font-size:20px;
font-weight:bold;
text-align:center;
)

HTML DRAG AND DROP DEMO





Introducere în drag and drop in HTML

Drag and Drop sunt acum una dintre cele mai recente caracteristici incluse în HTML. Drag and drop este un proces care începe atunci când utilizatorul alege un element care poate fi deplasat și plasează acest element în componenta droppable și îl plasează la locația specificată. Folosește modelul de evenimente Model Obiect Document (DOM), precum și unele evenimente de tracțiune care provin de la evenimente de mouse. Funcționează ca cea mai puternică interfață responsabilă de copierea, înregistrarea, ștergerea elementelor folosind un mouse. În cea mai recentă funcționalitate HTML, Drag and Drop funcționează la ultimele evenimente, cum ar fi dragstart, dragend precum ele vor fi folosite multe alte evenimente.

Evenimente pentru drag and drop

Există mai multe evenimente incluse în cea mai recentă funcționalitate de drag and drop (dnd), să vedem unul câte unul după cum urmează:

Haideți să vedem câteva atribute de date pe care se va întâmpla operația de glisare și picătură:

1. dataTransfer.dropEffect (= valoare): Acest atribut este utilizat pentru a arăta ce operațiune se desfășoară în prezent. se poate seta pentru a înlocui operațiunea deja selectată. Valorile incluse în el sunt ca o copie, link, niciuna sau mișcare.

2. dataTransfer.effectAllowed (= valoare): oricare dintre operațiunile sunt permise care vor fi returnate prin acest atribut. Este de asemenea posibil să setați, să schimbați operația deja selectată.

3. dataTransfer.files: Acest atribut de date folosit pentru a primi fișierul Lista fișierelor care vor fi târâte.

4. dataTransfer.addElement (element): Este folosit pentru a insera elementul deja existent într-o listă de alte elemente care sunt utile pentru a reda feedback-ul drag.

5. dataTransfer.setDragImage (element, x, y): Acest atribut este puțin similar cu cel de mai sus pentru actualizarea feedback-ului de glisare și pentru a ajuta la schimbarea feedback-ului deja existent

6. dataTransfer.clearData ((format)): ajută utilizatorul să elimine datele din formatul deja definit. Dacă utilizatorul a omis argumentul, IT-ul va elimina toate datele.

7. dataTransfer.setData (format, date): Este unul dintre atributele populare utilizate pentru a adăuga date specificate.

8. data = dataTransfer.getData (format): Acest atribut în operația Drag and Drag este folosit pentru extragerea datelor specificate. În cazul în care nu există aceleași date ca acesta, atunci va reveni la șirul gol

Sintaxa de drag and drop în HTML

Iată câțiva pași care definesc sintaxa pentru drag and drop:

Selectați obiectul pentru a fi un drag: setați atributul adevărat.

Începeți să trageți obiectul:

function dragStart(ev)()

Renunțați la obiect:

function dragDrop(ev)()

Exemple de drag and drop în HTML

Următorul exemplu va arăta cum se va efectua exact operația de glisare și picătură în HTML:

Exemplul # 1

Cod:


Drag and Drop Demo
function allowDrop(ev) (
ev.preventDefault();
)
function dragStart(ev) (
ev.dataTransfer.setData("text", ev.target.id);
)
function dragDrop(ev) (
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
)

#box (
margin: auto;
width: 30%;
width: 21%;
height:150px;
border: 2px solid blue;
padding: 2px;
)
#square1, #square2, #square3 (
float: left;
margin: 5px;
padding: 10px;
)
#square1 (
width: 30px;
height: 30px;
background-color: #BEA7CC;
)
#square2 (
width: 60px;
height: 60px;
background-color: #B5D5F5;
)
#square3 (
width: 90px;
height: 90px;
background-color:#F5B5C5 ;
)
h2 (
font-size:20px;
font-weight:bold;
text-align:center;
)

HTML DRAG AND DROP DEMO






Drag and Drop Demo
function allowDrop(ev) (
ev.preventDefault();
)
function dragStart(ev) (
ev.dataTransfer.setData("text", ev.target.id);
)
function dragDrop(ev) (
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
)

#box (
margin: auto;
width: 30%;
width: 21%;
height:150px;
border: 2px solid blue;
padding: 2px;
)
#square1, #square2, #square3 (
float: left;
margin: 5px;
padding: 10px;
)
#square1 (
width: 30px;
height: 30px;
background-color: #BEA7CC;
)
#square2 (
width: 60px;
height: 60px;
background-color: #B5D5F5;
)
#square3 (
width: 90px;
height: 90px;
background-color:#F5B5C5 ;
)
h2 (
font-size:20px;
font-weight:bold;
text-align:center;
)

HTML DRAG AND DROP DEMO





Ieșire: Ieșirea opțiunii de drag and drop va fi așa cum se arată mai jos:

După efectuarea operațiunii Drag and Drop va fi următoarea:

Exemplul # 2

Aici vom vedea un alt exemplu în care vom muta imaginea dintr-o locație într-o altă locație specificată, așa cum se arată sub cod:

Cod:



function allowDrop(ev) (
ev.preventDefault();
)
function dragStart(ev) (
ev.dataTransfer.setData("text", ev.target.id);
)
function dragDrop(ev) (
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
)

.divfirst (
width: 250px;
height: 150px;
padding: 10px;
border: 1px solid black;
background-color: #F5F5F5;
)
p (
font-size:20px;
font-weight:bold;
)



Demonstrație imagine glisare și picătură