Seret dan Lepaskan dalam HTML

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.

Acara untuk Seret dan Lepas

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 :

• dataTransfer.dropEffect [ = value ] : Cet attribut est utilisé pour montrer quelle opération est actuellement en cours. On peut le configurer pour remplacer l'opération déjà sélectionnée. Les valeurs qui y sont incluses comme une copie, un lien, aucun ou un déplacement.
• dataTransfer.effectAllowed [ = value ] : Les opérations autorisées seront renvoyées via cet attribut. Il est également possible de paramétrer la modification d'une opération déjà sélectionnée.
• dataTransfer.files : Cet attribut de données est utilisé pour obtenir la liste des fichiers qui vont être glissés.
• dataTransfer.addElement(element) : Il est utilisé pour insérer l'élément déjà existant dans une liste d'autres éléments utiles pour restituer les commentaires de glisser.
• dataTransfer.setDragImage(element, x, y) : Cet attribut est un peu le même que ci-dessus pour mettre à jour les commentaires de glisser et aider à modifier les commentaires déjà existants
• dataTransfer.clearData ( [ format ] ) : Il aide l'utilisateur à supprimer les données du format déjà défini. Si l'utilisateur omettait l'argument, le service informatique supprimerait toutes les données.
• dataTransfer.setData(format, data) : C'est l'un des attributs populaires utilisés pour ajouter des données spécifiées.
• data = dataTransfer.getData(format): Cet attribut dans l'opération Drag and Drag est utilisé pour extraire les données spécifiées. S'il n'y a pas les mêmes données, elle reviendra à la chaîne vide.

Syntaxe du glisser-déposer en HTML

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

Commencez à faire glisser l'objet :

function dragStart(ev){}

Déposez l'objet :

function dragDrop(ev){}

Exemples de glisser-déposer en HTML

L'exemple suivant montrera comment exactement l'opération glisser-déposer se déroulera en HTML.

Exemple n°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>

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 :

Exemple n°2

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 :

<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="Seret dan Lepaskan dalam HTML" >
</div>
<br>
<div class="divfirst" ondrop="dragDrop(event)" ondragover="allowDrop(event)"></div>

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 :

Exemple #3

Dans cet exemple, nous allons voir comment glisser-déposer un fichier à l'emplacement spécifié :

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>

Sortie :

Conclusion

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!