Glisser-déposer en HTML
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.
Événements pour glisser-déposer
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:
- dataTransfer.dropEffect [ = value ]: Dieses Attribut wird verwendet, um anzuzeigen, welcher Vorgang gerade ausgeführt wird. Man kann es so einstellen, dass es die bereits ausgewählte Operation ersetzt. Die darin enthaltenen Werte sind „Kopie“, „Link“, „Keine“ oder „Verschieben“.
- dataTransfer.effectAllowed [ = value ]: Welche Operationen auch immer zulässig sind, werden über dieses Attribut zurückgegeben. Es ist auch möglich, einen bereits ausgewählten Vorgang zu ändern.
- dataTransfer.files: Dieses Datenattribut wird verwendet, um eine Dateiliste der Dateien abzurufen, die gezogen werden sollen.
- dataTransfer.addElement(element): Wird verwendet, um das bereits vorhandene Element in eine Liste anderer Elemente einzufügen, die zum Rendern des Drag-Feedbacks nützlich sind.
- dataTransfer.setDragImage(element, x, y): Dieses Attribut ist ein wenig dasselbe wie oben, um das Drag-Feedback zu aktualisieren und dabei zu helfen, bereits vorhandenes Feedback zu ändern
- dataTransfer.clearData ( [format]): Es hilft dem Benutzer, Daten aus dem bereits definierten Format zu entfernen. Wenn der Benutzer das Argument weglässt, würde die IT alle Daten entfernen.
- dataTransfer.setData(format, data): Es ist eines der beliebtesten Attribute, die zum Hinzufügen bestimmter Daten verwendet werden.
- data = dataTransfer.getData(format): Dieses Attribut im Drag-and-Drag-Vorgang wird zum Extrahieren angegebener Daten verwendet. Wenn keine gleichen Daten vorhanden sind, wird zur leeren Zeichenfolge zurückgekehrt.
Syntax von Drag and Drop in HTML
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){}Beispiele für Drag & Drop in HTML
Das folgende Beispiel zeigt, wie genau der Drag-and-Drop-Vorgang in HTML funktioniert.
Beispiel #1
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:
Beispiel #2
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:
Beispiel #3
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:
Fazit
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
1663
14
1420
52
1313
25
1266
29
1239
24
Bordure de tableau en HTML
Sep 04, 2024 pm 04:49 PM
Guide de la bordure de tableau en HTML. Nous discutons ici de plusieurs façons de définir une bordure de tableau avec des exemples de bordure de tableau en HTML.
Tableau imbriqué en HTML
Sep 04, 2024 pm 04:49 PM
Ceci est un guide des tableaux imbriqués en HTML. Nous discutons ici de la façon de créer un tableau dans le tableau ainsi que des exemples respectifs.
Marge gauche HTML
Sep 04, 2024 pm 04:48 PM
Guide de la marge HTML gauche. Nous discutons ici d'un bref aperçu de la marge gauche HTML et de ses exemples ainsi que de son implémentation de code.
Disposition du tableau HTML
Sep 04, 2024 pm 04:54 PM
Guide de mise en page des tableaux HTML. Nous discutons ici des valeurs de la mise en page des tableaux HTML ainsi que des exemples et des résultats en détail.
Espace réservé d'entrée HTML
Sep 04, 2024 pm 04:54 PM
Guide de l'espace réservé de saisie HTML. Nous discutons ici des exemples d'espace réservé d'entrée HTML ainsi que des codes et des sorties.
Comment analysez-vous et traitez-vous HTML / XML dans PHP?
Feb 07, 2025 am 11:57 AM
Ce tutoriel montre comment traiter efficacement les documents XML à l'aide de PHP. XML (Language de balisage extensible) est un langage de balisage basé sur le texte polyvalent conçu à la fois pour la lisibilité humaine et l'analyse de la machine. Il est couramment utilisé pour le stockage de données et
Liste ordonnée HTML
Sep 04, 2024 pm 04:43 PM
Guide de la liste ordonnée HTML. Ici, nous discutons également de l'introduction de la liste et des types HTML ordonnés ainsi que de leur exemple respectivement.
Bouton HTML onclick
Sep 04, 2024 pm 04:49 PM
Guide du bouton HTML onclick. Nous discutons ici de leur introduction, de leur fonctionnement, des exemples et de l'événement onclick dans divers événements respectivement.
