Artikel berikut menyediakan garis besar untuk Seret dan Lepas dalam HTML. Drag and Drop ialah ciri terkini yang terkenal kerana menyediakan input secara manual dalam halaman web kerana corak fungsinya yang mudah. Kaedah seret dan lepas boleh diterangkan sebagai proses apabila pengguna memilih data/ pilihan tertentu daripada senarai item dalam medan sumber, seret perkara yang sama dan lepaskannya dalam medan destinasi. Ia dilaksanakan menggunakan Model Objek Dokumen, bersama-sama dengan berbilang acara tetikus dari halaman web HTML. Pelbagai acara yang digunakan dalam ciri ini ialah seret, dragstart, dragleave, dragenter, dragover, drop, dragend dan drag exit.
Terdapat berbilang acara yang disertakan dalam fungsi seret dan lepas (dnd) terkini; mari kita lihat satu persatu seperti berikut:
| Sr. No | Events | Details Description |
| 1 | Drag | To drag entity(element or text) when the mouse is moved with the element to be dragged. |
| 2 | Dragstart | The very first step in drag and drop is dragstart. It gets executed when the user is going to start with dragging the object to the required location. |
| 3 | Dragenter | Dragenter event is used when the mouse is getting hover on the target element. |
| 4 | Dragleave | This event is used when the user releases a mouse from an element. |
| 5 | Dragover | This event occurs when a mouse is used to over an element. |
| 6 | Drop | This event is used at the end of the drag and drop process for drop element operation. |
| 7 | Dragend | This is one of the most important event in this process for releasing the mouse button from the element to complete the drag procedure. |
| 8 | Dragexit | This event status that the element is no longer in the drag process of urgent target selection of element. |
Voyons quelques attributs de données sur lesquels l'opération de glisser-déposer va se produire :
Voici quelques étapes définissant la syntaxe du glisser-déposer :
Sélectionnez l'objet à glisser : Définissez l'attribut sur celui-ci.
<element draggable="true">
Commencez à faire glisser l'objet :
function dragStart(ev){}Déposez l'objet :
function dragDrop(ev){}L'exemple suivant montrera comment exactement l'opération glisser-déposer se déroulera en HTML.
Code :
<html>
<head>
<title>Drag and Drop Demo</title>
<script>
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));
}
</script>
<style>
#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;
}
</style>
</head>
<body>
<h2>HTML DRAG AND DROP DEMO</h2>
<div id = "box">
<div id="square1" draggable="true"ondragstart="dragStart(event)"></div>
<div id="square2" draggable="true"ondragstart="dragStart(event)"></div>
<div id="square3" ondrop="dragDrop(event)" ondragover="allowDrop(event)"></div>
</div>
</body>
</html>Sortie :
Avant le glisser-déposer, le résultat de l'option sera comme indiqué ci-dessous :
Après avoir effectué l'opération Glisser-Déposer, le résultat sera le suivant :
Ici, nous allons voir un autre exemple dans lequel nous déplacerons l'image d'un emplacement vers un autre emplacement spécifié, comme indiqué ci-dessous le code.
Code :
<!DOCTYPE HTML>
<html>
<head>
<script>
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));
}
</script>
<style>
.divfirst {
width: 250px;
height: 150px;
padding: 10px;
border: 1px solid black;
background-color: #F5F5F5;
}
p {
font-size:20px;
font-weight:bold;
}
</style>
</head>
<body>
<p>Image Drag and Drop Demo</p>
<div class="divfirst" ondrop="dragDrop(event)" ondragover="allowDrop(event)">
<img id="drag1"
src="Jerry.jpeg" draggable="true"
ondragstart="dragStart(event)" width="250" height="150"></div>
<br>
<div class= "divfirst"ondrop="dragDrop(event)"
ondragover="allowDrop(event)"></div>
</body>
</html>Sortie :
Avant l'opération glisser-déposer, le résultat est :
Une fois l'opération glisser-déposer terminée, cela ressemblera à ceci :
Dans cet exemple, nous allons voir comment glisser-déposer un fichier à l'emplacement spécifié :
Code :
<body>
<div id="filedemo" style="min-height: 150px; border: 1px solid black;"
ondragenter="document.getElementById('output').textContent = ''; event.stopPropagation(); event.preventDefault();"
ondragover="event.stopPropagation(); event.preventDefault();"
ondrop="event.stopPropagation(); event.preventDefault();
dodrop(event);">
DROP FILES HERE...
</div>
<script>
function dodrop(event)
{
var dt = event.dataTransfer;
var files = dt.files;
for (var i = 0; i < files.length; i++) {
output(" File " + i + ":\n(" + (typeof files[i]) + ") : <" + files[i] + " > " +
files[i].name + " " );
}
}
function output(text)
{
document.getElementById("filedemo").textContent += text;
}
</script>
</body>Sortie :
Le glisser-déposer HTML est l'une des entités d'interface utilisateur les plus importantes qui sera utilisée à différentes fins comme la copie, la suppression ou l'enregistrement. Cela fonctionne sur différents événements et attributs, comme indiqué ci-dessus. Il effectue l'opération lorsque vous choisissez un objet, puis le déposez à un emplacement spécifié.
Atas ialah kandungan terperinci Seret dan Lepaskan dalam HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
