Glisser-déposer en HTML
Sep 04, 2024 pm 04:38 PM
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
Undress AI Tool
Images de déshabillage gratuites
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.
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
échangez les visages dans n'importe quelle vidéo sans effort grace à 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)
Pourquoi mon image n'appara?t-elle pas dans HTML?
Jul 28, 2025 am 02:08 AM
L'image non affichée est généralement causée par un mauvais chemin de fichier, un nom ou une extension de fichier incorrect, des problèmes de syntaxe HTML ou un cache de navigateur. 1. Assurez-vous que le chemin SRC est cohérent avec l'emplacement réel du fichier et utilisez le chemin relatif correct; 2. Vérifiez si le cas de fichier et l'extension correspondent exactement et vérifiez si l'image peut être chargée en entrant directement l'URL; 3. Vérifiez si la syntaxe TAG IMG est correcte, assurez-vous qu'il n'y a pas de caractères redondants et que la valeur d'attribut ALT est appropriée; 4. Essayez de forcer l'actualisation de la page, de nettoyer le cache ou d'utiliser le mode incognito pour éliminer les interférences du cache. Le dépannage dans cet ordre peut résoudre la plupart des problèmes d'affichage d'image HTML.
Pouvez-vous mettre une balise dans une autre balise ?
Jul 27, 2025 am 04:15 AM
?oucannotnesttagssisideanothertagbecauseit’sinvalidhtml; browsersautomatiquematethethefirstbeforeOpiningtheenxt, résultant de laparateParagraphs.
Comment créer une liste non ordonnée dans HTML?
Jul 30, 2025 am 04:50 AM
Pour créer une liste HTML non ordonnée, vous devez utiliser une balise pour définir un conteneur de liste. Chaque élément de liste est enveloppé d'une balise et le navigateur ajoutera automatiquement des balles; 1. Créez une liste avec une balise; 2. Chaque élément de liste est défini avec une balise; 3. Le navigateur génère automatiquement des symboles de points par défaut; 4. Les sublilistes peuvent être mis en ?uvre par le biais de la nidification; 5. Utilisez l'attribut de type de style liste de CSS pour modifier le style de symbole, tel que le disque, le cercle, le carré ou aucun; Utilisez ces balises correctement pour générer une liste standard non ordonnée.
Comment utiliser l'attribut satisfait?
Jul 28, 2025 am 02:24 AM
THECONTANTITABLEATTRIBUTEMAKESANYHTMLEMéMéRITéBYADDING CONTANTITALLE = "VRUE", permettant à la réception de codomente detteurthebrowser.
L'importance du HTML sémantique pour le référencement et l'accessibilité
Jul 30, 2025 am 05:05 AM
SémantichtmlimprovesbothseoandaccessibilityByusing a été ultime
Définition des vocabulaires personnalisés en utilisant le balisage HTML5 Schema.org.
Jul 31, 2025 am 10:50 AM
La balise Schema.org aide les moteurs de recherche à comprendre le format de données structuré du contenu de la page Web via des balises sémantiques (telles que la portée de l'élément, le type d'élément, ItemProp); Il peut être utilisé pour définir le vocabulaire personnalisé, les méthodes incluent l'extension des types existants ou l'utilisation de Type supplémentaire pour introduire de nouveaux types; Dans les applications réelles, en gardant la structure claire, en utilisant d'abord les attributs officiels, tester la validité du code et garantir que les types personnalisés sont accessibles; Les précautions comprennent l'acceptation de soutien partiel, d'éviter les erreurs d'orthographe et de choisir un format approprié tel que JSON-LD.
Comment créer un champ de saisie de recherche dans un formulaire HTML
Aug 02, 2025 pm 04:44 PM
UsetheelementwithinatagtocreatEasanticsearchField.2. y comprisaForAccesssibility, settheform'sactionandMethod = "get" attributestosenddatatoesearchndpointwithAsharableArl.3.Addname = "Q" todefinetheQueryParameter, usePlaceHolderToguiseUd
Comment gérer un bouton cliquer avec onClick?
Jul 30, 2025 am 05:16 AM
Utilisez l'attribut onClick dans HTML pour lier directement les événements de clic, qui conviennent aux scénarios simples mais qui ne sont pas propices à la maintenance du code; 2. La fonction d'attribut d'attribut ONClick des éléments en JavaScript est plus propice aux structures et aux comportements séparant, mais écrasera le gestionnaire d'événements précédent; 3. Il est recommandé d'utiliser la méthode AddeveventListener pour prendre en charge la surveillance des événements multiples et de mieux contr?ler le flux d'événements, et devrait fonctionner après le chargement du DOM pour éviter les erreurs courantes telles que l'accès prématuré aux éléments ou les conflits de devis en HTML. Par conséquent, ONClick convient aux débutants et aux petits projets, tandis qu'AdveventListener est plus adapté aux applications complexes.
