API-ul HTML pentru Tragere și Plasare (Drag and Drop)
API-ul HTML Drag and Drop permite ca un element să fie tras și plasat.
Tragere și Plasare
Tragerea și plasarea este o funcție foarte des întâlnită. Se întâmplă atunci când „apuci” un obiect și îl tragi într-un alt loc.
Suport pentru browsere
Drag and Drop este suportat în toate browserele moderne (începând cu Chrome 4, Edge 9, Firefox 3.5, Safari 6 și Opera 12).
Exemplu de API HTML Drag and Drop
Iată un exemplu simplu de tragere și plasare: o imagine care poate fi trasă și un div țintă.
Exemplu
Tragerea unei imagini într-un div.
Rezultat: pagină HTML completă
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.dropzone {
width: 350px;
height: 80px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
<script>
function dragstartHandler(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function dragoverHandler(ev) {
ev.preventDefault();
}
function dropHandler(ev) {
ev.preventDefault();
const data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" class="dropzone" ondrop="dropHandler(event)" ondragover="dragoverHandler(event)"></div>
<img id="img1" src="img_logo.gif" draggable="true" ondragstart="dragstartHandler(event)" width="336" height="69">
</body>
</html>
Fă un Element Care Poate fi Tras
Mai întâi, pentru a face un element care poate fi tras, setează atributul său draggable la true. Acest lucru funcționează pentru orice element, cum ar fi o imagine sau un paragraf.
Imagine ce poate fi trasă
O imagine făcută să poată fi trasă.
<img id="img1" draggable="true">
Paragraf ce poate fi tras
Un paragraf făcut să poată fi tras.
<p id="p1" draggable="true">Draggable text</p>
Ce se Trage - ondragstart și setData()
Apoi, precizează ce se întâmplă când elementul este tras. Atributul ondragstart al elementului apelează o funcție (aici dragstartHandler) care setează datele ce urmează a fi trase. Metoda dataTransfer.setData() setează tipul și valoarea datelor; în exemplu tipul este „text”, iar valoarea este id-ul elementului tras.
Unde se Plasează - ondragover
Atributul ondragover al elementului țintă apelează o funcție (aici dragoverHandler) care specifică unde pot fi plasate datele. Implicit, datele nu pot fi plasate în alte elemente, deci pentru a permite o plasare trebuie să apelezi preventDefault() pe evenimentul ondragover.
Realizarea Plasării - ondrop
Când datele trase sunt plasate, se declanșează un eveniment de plasare (drop). Atributul ondrop al țintei apelează o funcție (aici dropHandler) care: apelează preventDefault() pentru a opri comportamentul implicit al browserului (care este să deschidă datele ca link), obține datele trase cu dataTransfer.getData() (id-ul elementului tras) și adaugă elementul tras în ținta plasării.
Mai Multe Exemple
Aceiași handleri pot trage și alte tipuri de elemente într-un div, sau pot muta o imagine înainte și înapoi între două div-uri.
Tragerea unui h1 într-un div
Tragerea unui titlu într-un div.
Rezultat: pagină HTML completă
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.dropzone {
width: 350px;
height: 80px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
<script>
function dragstartHandler(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function dragoverHandler(ev) {
ev.preventDefault();
}
function dropHandler(ev) {
ev.preventDefault();
const data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" class="dropzone" ondrop="dropHandler(event)" ondragover="dragoverHandler(event)"></div>
<h1 id="h1" draggable="true" ondragstart="dragstartHandler(event)">PromptCookbook</h1>
</body>
</html>
Tragerea unui link într-un div
Tragerea unui link într-un div.
Rezultat: pagină HTML completă
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.dropzone {
width: 350px;
height: 80px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
<script>
function dragstartHandler(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function dragoverHandler(ev) {
ev.preventDefault();
}
function dropHandler(ev) {
ev.preventDefault();
const data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" class="dropzone" ondrop="dropHandler(event)" ondragover="dragoverHandler(event)"></div>
<a id="link1" href="https://prompt-cookbook.com" draggable="true" ondragstart="dragstartHandler(event)">PromptCookbook</a>
</body>
</html>
Tragerea înainte și înapoi între două div-uri
Mutarea unei imagini între două div-uri.
Rezultat: pagină HTML completă
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.dropzone {
width: 350px;
height: 80px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
<script>
function dragstartHandler(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function dragoverHandler(ev) {
ev.preventDefault();
}
function dropHandler(ev) {
ev.preventDefault();
const data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" class="dropzone" ondrop="dropHandler(event)" ondragover="dragoverHandler(event)">
<img id="img1" src="img_logo.gif" draggable="true" ondragstart="dragstartHandler(event)" width="336" height="69">
</div>
<br>
<div id="div2" class="dropzone" ondrop="dropHandler(event)" ondragover="dragoverHandler(event)"></div>
</body>
</html>