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"></element>

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:

<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>


<h2 id="HTML-DRAG-AND-DROP-DEMO">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>

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:

<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>


<p>Image Drag and Drop Demo</p>
<div class="divfirst" ondrop="dragDrop(event)" ondragover="allowDrop(event)">
<img  src="/static/imghwm/default1.png" data-src="Jerry.jpeg" class="lazy" id="drag1" draggable="true" ondragstart="dragStart(event)"    style="max-width:90%"  style="max-width:90%" alt="Glisser-déposer en HTML" >
</div>
<br>
<div class="divfirst" ondrop="dragDrop(event)" ondragover="allowDrop(event)"></div>

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:

<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>

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!