Maison > Article > interface Web > Guide HTML5 (3) - Implémentation de la fonction glisser-déposer
Guide HTML5 (3) - Implémentation de la fonction glisser-déposer
- 黄舟original
- 2017-03-22 16:05:521544parcourir
Le contenu de cet article explique comment implémenter la fonction glisser-déposer élément HTML dans html5. Avant html5, pour implémenter le glisser-déposer, il fallait utiliser js. Désormais, html5 prend en charge la fonction glisser-déposer en interne, mais pour implémenter des fonctions un peu plus complexes, l'aide de js est toujours indispensable. Regardons quelques exemples ci-dessous.
1. Créez un objet glisser
Nous pouvons indiquer au navigateur quels éléments doivent être glissés et déposés via l'attribut draggable. draggable a trois valeurs : true : l'élément peut être déplacé ; false : l'élément ne peut pas être déplacé ; auto : le navigateur détermine si l'élément peut être déplacé.
La valeur par défaut du système est auto, mais dans le cas automatique, les navigateurs prennent en charge différemment la fonction glisser-déposer de différents éléments. Par exemple, l'objet img est pris en charge mais l'objet p n'est pas pris en charge. Par conséquent, si vous devez faire glisser un élément, il est préférable de définir draggale sur true. Regardons un exemple ci-dessous :
<!DOCTYPE HTML><html><head>
<title>Example</title>
<style>
#src > * {
float: left;
}
#target, #src > img {
border: thin solid black;
padding: 2px;
margin: 4px;
}
#target {
height: 123px;
width: 220px;
text-align: center;
display: table;
}
#target > p {
display: table-cell;
vertical-align: middle;
}
#target > img {
margin: 1px;
}
</style></head><body>
<p id="src">
<img draggable="true" id="car1" src="img/1.jpg" alt="car1" />
<img draggable="true" id="car2" src="img/2.jpg" alt="car2" />
<img draggable="true" id="car3" src="img/3.jpg" alt="car3" />
<p id="target">
<p id="msg">
drop here</p>
</p>
</p>
<script>
var src = document.getElementById("src");
var target = document.getElementById("target");
</script>
</body>
</html>Effet de course :
Découvrons maintenant les événements liés au glisser-déposer. Il existe deux types d'événements, l'un est l'événement de l'objet glisser et l'autre est l'événement de la zone de dépôt. Les événements de glisser incluent : dragstart : déclenché lorsque le glisser de l'élément commence ; drag : déclenché pendant le processus de glissement de l'élément ; dragend : déclenché lorsque le glissement de l'élément se termine. Regardons un exemple ci-dessous :
<!DOCTYPE HTML><html><head>
<title>Example</title>
<style>
#src > * {
float: left;
}
#target, #src > img {
border: thin solid black;
padding: 2px;
margin: 4px;
}
#target {
height: 123px;
width: 220px;
text-align: center;
display: table;
}
#target > p {
display: table-cell;
vertical-align: middle;
}
#target > img {
margin: 1px;
}
img.dragged {
background-color: Orange;
}
</style></head><body>
<p id="src">
<img draggable="true" id="car1" src="img/1.jpg" alt="car1" />
<img draggable="true" id="car2" src="img/2.jpg" alt="car2" />
<img draggable="true" id="car3" src="img/3.jpg" alt="car3" />
<p id="target">
<p id="msg">
drop here</p>
</p>
</p>
<script>
var src = document.getElementById("src");
var target = document.getElementById("target");
var msg = document.getElementById("msg");
src.ondragstart = function (e) {
e.target.classList.add("dragged");
}
src.ondragend = function (e) {
e.target.classList.remove("dragged");
msg.innerHTML = "drop here";
}
src.ondrag = function (e) {
msg.innerHTML = e.target.id;
} </script></body></html>Effet de l'opération :
3. Créer une zone de livraison
Regardons les événements liés à la zone de dépôt : dragenter : déclenché lorsque l'objet déplacé entre dans la zone de dépôt ; dragover : déclenché lorsque l'objet déplacé se déplace dans la zone de dépôt ; dragleave : l'objet déplacé n'est pas placé dans la zone de dépôt ; , mais quitte la zone de dépôt Déclenché lorsque ; drop : déclenché lorsque l'objet glissé est déposé dans la zone de dépôt. Regardons un exemple :<!DOCTYPE HTML><html><head>
<title>Example</title>
<style>
#src > * {
float: left;
}
#target, #src > img {
border: thin solid black;
padding: 2px;
margin: 4px;
}
#target {
height: 123px;
width: 220px;
text-align: center;
display: table;
}
#target > p {
display: table-cell;
vertical-align: middle;
}
#target > img {
margin: 1px;
}
img.dragged {
background-color: lightgrey;
}
</style></head><body>
<p id="src">
<img draggable="true" id="car1" src="img/1.jpg" alt="car1" />
<img draggable="true" id="car2" src="img/2.jpg" alt="car2" />
<img draggable="true" id="car3" src="img/3.jpg" alt="car3" />
<p id="target">
<p id="msg">
drop here</p>
</p>
</p>
<script>
var src = document.getElementById("src");
var target = document.getElementById("target");
var msg = document.getElementById("msg");
var draggedID;
target.ondragenter = handleDrag;
target.ondragover = handleDrag;
function handleDrag(e) {
e.preventDefault();
}
target.ondrop = function (e) {
var newElem = document.getElementById(draggedID).cloneNode(false);
target.innerHTML = "";
target.appendChild(newElem);
e.preventDefault();
}
src.ondragstart = function (e) {
draggedID = e.target.id;
e.target.classList.add("dragged");
}
src.ondragend = function (e) {
var elems = document.querySelectorAll(".dragged");
for (var i = 0; i < elems.length; i++) {
elems[i].classList.remove("dragged");
}
} </script></body></html> Résultats en cours d'exécution :
4. Utiliser DataTransfer
Nous utilisons DataTransfer pour transférer les données de l'objet glisser vers la zone de dépôt. DataTransfer a les propriétés et méthodes suivantes : types : renvoie le format des données ; getData(0313a12b65aa20a048ec62b8cf470fd2) : renvoie les données au format spécifié ; setData(0313a12b65aa20a048ec62b8cf470fd2, 1d029f6197b5a3eb8a3fdf0a088ddf55) : définit les données dans le format spécifié ; clearData(db67a7d68f7dcf3e1cbb6c58d46c7cd0) : supprime les données de format spécifiées : renvoie un tableau de fichiers qui ont été livrés. Regardons l'exemple suivant, qui obtient le même effet que l'exemple 3 :9a78f9382cfffc6c56b2ff1d7da5de14100db36a723c770d327fc0aef2ce13b193f0f5c25f18dab9d176bd4f6de5d30e
b2386ffb911b14667cb8f0f91ea547a7Example6e916e0f7d1e588d4f442bf645aedb2f
c9ccee2e6ea535a969eb3f532ad9fe89
#src > * {
float: left;
}
#src > img {
border: thin solid black;
padding: 2px;
margin: 4px;
}
#target {
border: thin solid black;
margin: 4px;
}
#target {
height: 123px;
width: 220px;
text-align: center;
display: table;
}
#target > p {
display: table-cell;
vertical-align: middle;
}
img.dragged {
background-color: Orange;
}
531ac245ce3e4fe3d50054a55f2659279c3bca370b5104690d9ef395f2c5f8d16c04bd5ca3fcae76e30b72ad730ca86d
d643afa7f44205fa36f73ddcbd859a1f
4ebcc5acaaef9a420126fa5287284026
c0bdd28485ad805bfb7e05724c72c844
e07cff6edccd0ece2caea16e427bd7cd
b542d434cdaa3cd747109219a835c8f5
42e673d36f66c5d00fecbb811523d281
drop here94b3e26ee717c64999d7867364b1b4a3
94b3e26ee717c64999d7867364b1b4a3
94b3e26ee717c64999d7867364b1b4a3
3f1c4e4b6b16bbbd69b2ee476dc4f83a
var src = document.getElementById("src");
var target = document.getElementById("target");
target.ondragenter = handleDrag;
target.ondragover = handleDrag;
function handleDrag(e) {
e.preventDefault();
}
target.ondrop = function (e) {
var droppedID = e.dataTransfer.getData("Text");
var newElem = document.getElementById(droppedID).cloneNode(false);
target.innerHTML = "";
target.appendChild(newElem);
e.preventDefault();
}
src.ondragstart = function (e) {
e.dataTransfer.setData("Text", e.target.id);
e.target.classList.add("dragged");
}
src.ondragend = function (e) {
var elems = document.querySelectorAll(".dragged");
for (var i = 0; i 2cdd3b3430fe4db382eef792693250d536cc49f0c466276486e50c850b7e495673a6ac4ed44ffec12cee46588e518a5e 5. Glissez-déposez des fichiers
HTML5. Le support File API nous permet d'exploiter des fichiers locaux. Généralement, nous n'utilisons pas l'API de fichier directement. Nous pouvons l'utiliser en combinaison avec d'autres fonctionnalités, telles que des effets de glisser-déposer, comme dans l'exemple suivant :<!DOCTYPE HTML><html><head>
<title>Example</title>
<style>
body > * {
float: left;
}
#target {
border: medium double black;
margin: 4px;
height: 75px;
width: 200px;
text-align: center;
display: table;
}
#target > p {
display: table-cell;
vertical-align: middle;
}
table {
margin: 4px;
border-collapse: collapse;
}
th, td {
padding: 4px;
}
</style></head><body>
<p id="target">
<p id="msg">
Drop Files Here</p>
</p>
<table id="data" border="1">
</table>
<script>
var target = document.getElementById("target");
target.ondragenter = handleDrag;
target.ondragover = handleDrag;
function handleDrag(e) {
e.preventDefault();
}
target.ondrop = function (e) {
var files = e.dataTransfer.files;
var tableElem = document.getElementById("data");
tableElem.innerHTML = "<tr><th>Name</th><th>Type</th><th>Size</th></tr>";
for (var i = 0; i < files.length; i++) {
var row = "<tr><td>" + files[i].name + "</td>
<td>" + files[i].type + "</td>
<td>" + files[i].size + "</td></tr>";
tableElem.innerHTML += row;
}
e.preventDefault();
} </script></body></html> DataTransfer renvoie un objet FileList. peut le traiter comme un objet de tableau de fichiers. file contient les attributs suivants : nom : nom du fichier ; type : type de fichier (type MIME : taille du fichier) ; Effet de course :
6. 🎜> Voici un exemple de téléchargement de fichiers en faisant glisser ajax.
Effet :<!DOCTYPE HTML><html><head>
<title>Example</title>
<style>
.table {
display: table;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
padding: 5px;
}
.label {
text-align: right;
}
#target {
border: medium double black;
margin: 4px;
height: 50px;
width: 200px;
text-align: center;
display: table;
}
#target > p {
display: table-cell;
vertical-align: middle;
}
</style></head><body>
<form id="fruitform" method="post" action="/UploadHandler.ashx">
<p class="table">
<p class="row">
<p class="cell label">
Bananas:</p>
<p class="cell">
<input name="bananas" value="2" /></p>
</p>
<p class="row">
<p class="cell label">
Apples:</p>
<p class="cell">
<input name="apples" value="5" /></p>
</p>
<p class="row">
<p class="cell label">
Cherries:</p>
<p class="cell">
<input name="cherries" value="20" /></p>
</p>
<p class="row">
<p class="cell label">
File:</p>
<p class="cell">
<input type="file" name="file" /></p>
</p>
<p class="row">
<p class="cell label">
Total:</p>
<p id="results" class="cell">
0 items</p>
</p>
</p>
<p id="target">
<p id="msg">
Drop Files Here</p>
</p>
<button id="submit" type="submit">
Submit Form</button>
</form>
<script type="text/javascript">
var target = document.getElementById("target");
var httpRequest;
var fileList;
target.ondragenter = handleDrag;
target.ondragover = handleDrag;
function handleDrag(e) {
e.preventDefault();
}
target.ondrop = function (e) {
fileList = e.dataTransfer.files;
e.preventDefault();
}
document.getElementById("submit").onclick = function handleButtonPress(e) {
e.preventDefault();
var form = document.getElementById("fruitform");
var formData = new FormData(form);
if (fileList) {
for (var i = 0; i < fileList.length; i++) {
formData.append("file" + i, fileList[i]);
}
}
httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = handleResponse;
httpRequest.open("POST", form.action);
httpRequest.send(formData);
} function handleResponse() {
if (httpRequest.readyState == 4 && httpRequest.status == 200) {
var data = JSON.parse(httpRequest.responseText);
document.getElementById("results").innerHTML = "You ordered " + data.total + " items";
}
}
</script>
</body>
</html>
Certains des exemples ci-dessus peuvent avoir des effets d'exécution différents dans différents navigateurs. J'utilise le navigateur Chrome, à l'exception de l'exemple 5. et 6 ne prend pas en charge plusieurs fichiers, d'autres exemples s'exécutent normalement. Vous pouvez télécharger la démo.
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!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn