L'article suivant fournit un aperçu du glisser-déposer en HTML. Le glisser-déposer est la dernière fonctionnalité bien connue pour fournir manuellement des entrées dans des pages Web en raison de son modèle fonctionnel pratique. La méthode glisser-déposer peut être décrite comme le processus par lequel un utilisateur sélectionne une donnée/option spécifique dans la liste des éléments du champ source, la fait glisser et la dépose dans le champ de destination. Il est implémenté à l'aide du modèle d'objet de document, ainsi que de plusieurs événements de souris provenant de la page Web HTML. Les différents événements utilisés dans cette fonctionnalité sont un glisser, un dragstart, un dragleave, un dragenter, un dragover, un drop, un dragend et un drag exit.
Plusieurs événements sont inclus dans la dernière fonctionnalité glisser-déposer (dnd) ; voyons un par un comme suit :
| 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. |
Sehen wir uns einige Datenattribute an, bei denen der Drag-and-Drop-Vorgang stattfinden wird:
Hier sind ein paar Schritte zum Definieren der Syntax für Drag & Drop:
Wählen Sie das Objekt aus, das als Drag verwendet werden soll:Setzen Sie das Attribut auf true.
<element draggable="true">
Objekt ziehen:
function dragStart(ev){}Das Objekt fallen lassen:
function dragDrop(ev){}Das folgende Beispiel zeigt, wie genau der Drag-and-Drop-Vorgang in HTML funktioniert.
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>Ausgabe:
Vor dem Drag-and-Drop sieht die Optionsausgabe wie folgt aus:
Nachdem Sie den Drag-and-Drop-Vorgang ausgeführt haben, sieht die Ausgabe wie folgt aus:
Hier sehen wir ein weiteres Beispiel, in dem wir das Bild von einem Ort an einen anderen angegebenen Ort verschieben, wie unten im Code gezeigt.
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>Ausgabe:
Vor dem Drag-and-Drop-Vorgang lautet die Ausgabe:
Nachdem der Drag-and-Drop-Vorgang abgeschlossen ist, sieht es folgendermaßen aus:
In diesem Beispiel sehen wir, wie man eine Datei per Drag-and-Drop an den angegebenen Speicherort zieht:
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>Ausgabe:
HTML-Drag-and-Drop ist eine der wichtigsten Benutzeroberflächeneinheiten, die für verschiedene Zwecke wie Kopieren, Löschen oder Aufzeichnen verwendet wird. Es funktioniert bei verschiedenen Ereignissen und Attributen, wie oben aufgeführt. Es führt den Vorgang aus, wenn Sie ein Objekt auswählen und es dann an einer bestimmten Stelle ablegen.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
