English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Le glisser-déposer est une fonctionnalité courante qui consiste à saisir un objet et à le glisser vers un autre emplacement. Dans HTML5 dans, le glisser-déposer fait partie des normes, et tout élément peut être glissé et déplacé.
Glisser-déposer (Drag et drop) est une fonctionnalité HTML5 partie intégrante des normes.
Télécharger oldtoolbag.com icône glisser dans la boîte rectangulaire.
Le glisser-déposer est une fonctionnalité courante qui consiste à saisir un objet et à le glisser vers un autre emplacement.
Dans HTML5 dans, le glisser-déposer fait partie des normes, et tout élément peut être glissé et déplacé.
Internet Explorer 9+, Firefox, Opera, Chrome, et Safari supportent le glisser-déposer.
注意:Safari 5.1.2不支持拖动.
下面的示例是一个简单的拖放示例：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>基础教程(oldtoolbag.com)</title>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev)
{'}}
ev.preventDefault();
}
function drag(ev)
{'}}
ev.dataTransfer.setData("Text", ev.target.id);
}
function drop(ev)
{'}}
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>glisser oldtoolbag.com glisser l'image dans la boîte rectangulaire :/p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="/static/images/logo-n.png" draggable="true" ondragstart="drag(event)" width="336" height="69">
</body>
</html>testez pour voir ‹/›Il peut sembler complexe, mais nous pouvons examiner séparément les différentes parties des événements glissés et mis en place.
Pour rendre un élément glissable, définissez l'attribut draggable sur true :
<img draggable="true">
Ensuite, définissez ce qui se passe lorsque l'élément est glissé.
Dans l'exemple précédent, l'attribut ondragstart appelle une fonction, drag(event), qui définit les données glissées.
La méthode dataTransfer.setData() définit le type et la valeur des données glissées :
function drag(ev)
{'}}
ev.dataTransfer.setData("Text", ev.target.id);
}
Text est une DOMString qui représente le type de données glissées à ajouter à l'objet glissé. La valeur est l'id de l'élément glissable ("drag1")。
L'événement ondragover détermine où les données glissées doivent être placées.
Par défaut, les données ne peuvent pas être/Un élément est placé dans un autre élément. Si nous devons permettre la mise en place, nous devons empêcher le traitement par défaut de l'élément.
Cela nécessite d'appeler la méthode event.preventDefault() de l'événement ondragover :
event.preventDefault()
Un événement drop se produit lorsque des données glissées sont placées.
Dans l'exemple précédent, l'attribut ondrop appelle une fonction, drop(event) :
function drop(ev)
{'}}
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
Explication du code :
Appeler preventDefault() pour éviter le traitement par défaut des données par le navigateur (le comportement par défaut de l'événement drop est d'ouvrir les données sous forme de lien)
Obtenir les données glissées en utilisant la méthode getData("Text") du dataTransfer. Cette méthode renverra tout type de données qui a été défini de la même manière dans la méthode setData().
Les données glissées sont l'id de l'élément glissé ("drag1})
Ajouter l'élément glissé à l'élément de destination (élément cible)
HTML5Glisser-déposer des images en avant et en arrière
Comment glisser-déposer une image entre deux éléments <div>.