Glisser-déposer HTML5
Glisser-déposer
Le glisser-déposer est une fonctionnalité courante qui vous permet de saisir un objet et de le faire glisser vers un autre emplacement ultérieurement.
En HTML5, le glisser-déposer fait partie de la norme, et n'importe quel élément peut être glissé et déposé.
Exemples associés :
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>html5 drag & drop 拖拽与拖放测试</title>
<style>
body{font-size:84%;}
.dustbin{width:100px; height:260px; line-height:1.4; background-color:gray; font-size:36px; font-family:"微软雅黑", "Yahei Mono"; text-align:center; text-shadow:-1px -1px #bbb; float:left;}
.dragbox{width:500px; padding-left:20px; float:left;}
.draglist{padding:10px; margin-bottom:5px; border:2px dashed #ccc; background-color:#eee; cursor:move;}
.draglist:hover{border-color:#cad5eb; background-color:#f0f3f9;}
.dragremind{padding-top:2em; clear:both;}
</style>
</head>
<body>
<div class="dustbin"><br>垃<br>圾<br>箱</div>
<div class="dragbox">
<div class="draglist" title="拖拽我" draggable="true">列表1</div>
<div class="draglist" title="拖拽我" draggable="true">列表2</div>
<div class="draglist" title="拖拽我" draggable="true">列表3</div>
<div class="draglist" title="拖拽我" draggable="true">列表4</div>
<div class="draglist" title="拖拽我" draggable="true">列表5</div>
<div class="draglist" title="拖拽我" draggable="true">列表6</div>
</div>
<div class="dragremind"></div>
<script type="text/javascript" async="" src="http://www.google-analytics.com/ga.js"></script><script>
var $ = function(selector) {
if (!selector) { return []; }
var arrEle = [];
if (document.querySelectorAll) {
arrEle = document.querySelectorAll(selector);
} else {
var oAll = document.getElementsByTagName("div"), lAll = oAll.length;
if (lAll) {
var i = 0;
for (i; i<lAll; i+=1) {
if (/^\./.test(selector)) {
if (oAll[i].className === selector.replace(".", "")) {
arrEle.push(oAll[i]);
}
} else if(/^#/.test(selector)) {
if (oAll[i].id === selector.replace("#", "")) {
arrEle.push(oAll[i]);
}
}
}
}
}
return arrEle;
};
var eleDustbin = $(".dustbin")[0], eleDrags = $(".draglist"), lDrags = eleDrags.length, eleRemind = $(".dragremind")[0], eleDrag = null;
for (var i=0; i<lDrags; i+=1) {
eleDrags[i].onselectstart = function() {
return false;
};
eleDrags[i].ondragstart = function(ev) {
ev.dataTransfer.effectAllowed = "move";
ev.dataTransfer.setData("text", ev.target.innerHTML);
ev.dataTransfer.setDragImage(ev.target, 0, 0);
eleDrag = ev.target;
return true;
};
eleDrags[i].ondragend = function(ev) {
ev.dataTransfer.clearData("text");
eleDrag = null;
return false
};
}
eleDustbin.ondragover = function(ev) {
ev.preventDefault();
return true;
};
eleDustbin.ondragenter = function(ev) {
this.style.color = "#ffffff";
return true;
};
eleDustbin.ondrop = function(ev) {
if (eleDrag) {
eleRemind.innerHTML = '<strong>"' + eleDrag.innerHTML + '"</strong>被扔进了垃圾箱';
eleDrag.parentNode.removeChild(eleDrag);
}
this.style.color = "#000000";
return false;
};
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-11205167-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>Définir l'élément comme déplaçable
Tout d'abord, afin de rendre l'élément déplaçable, définissez l'attribut draggable sur true :
<img draggable="true">
Que faire glisser - ondragstart et setData()
Ensuite, spécifiez ce qui se passe lorsque l'élément est déplacé.
Dans l'exemple ci-dessus, l'attribut ondragstart appelle une fonction, drag(event), qui spécifie les données à glisser.
La méthode dataTransfer.setData() définit le type de données et la valeur des données déplacées :
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}Dans cet exemple, le type de données est "Texte" et la valeur est l'identifiant du déplaçable élément ( "glisser1").
Où placer - ondragover
L'événement ondragover spécifie où placer les données glissées.
Par défaut, les données/éléments ne peuvent pas être placés à l'intérieur d'autres éléments. Si nous devons autoriser le placement, nous devons empêcher la gestion par défaut de l'élément.
Ceci est placé en appelant la méthode event.preventDefault() de l'événement ondragover :
event.preventDefault()
- ondrop
Lorsque les données déplacées sont déposées, l'événement de dépôt se produit.
Dans l'exemple ci-dessus, 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 :
Appelez PreventDefault() pour empêcher le navigateur de modifier le data Le traitement par défaut (le comportement par défaut de l'événement drop est d'ouvrir sous forme de lien)
Récupérez les données glissées via la méthode dataTransfer.getData("Text"). Cette méthode renverra n'importe quel ensemble de données du même type dans la méthode setData().
Les données déplacées sont l'identifiant de l'élément déplacé ("drag1")
Ajouter l'élément déplacé à l'élément placé (élément cible)
Résumé des points de connaissances pertinents :
Objet DataTransfer : Le support utilisé pour transférer l'objet déposé, généralement Event.dataTransfer.
attribut draggable : l'élément label doit être défini sur draggable=true, sinon il n'aura aucun effet, par exemple :
<div title="Faites-moi glisser" draggable="true"> ; liste 1</div>
événement ondragstart : un événement déclenché lorsque l'élément glissé commence à être glissé. Cet événement agit sur l'élément glissé.
événement ondraggenter : lorsque l'élément glissé entre dans l'élément cible. l'événement est déclenché lorsque l'élément glisser se déplace sur l'élément cible. Cet événement agit sur l'élément cible
événement ondragover : L'événement est déclenché lorsque l'élément glisser se déplace sur l'élément cible.
Evénement ondrop : L'événement déclenché lorsque l'élément glissé est sur l'élément cible et que la souris est relâchée en même temps Cet événement agit sur l'élément cible
Événement ondragend : L'événement est. déclenché lorsque le glisser est terminé. Cet événement agit sur l'élément glissé. La méthode
Event.preventDefault() sur l'élément : empêche l'exécution de certaines méthodes événementielles par défaut. PreventDefault() doit être exécuté dans ondragover, sinon l'événement ondrop ne sera pas déclenché. De plus, si vous faites glisser quelque chose depuis d'autres applications ou fichiers, en particulier des images, l'action par défaut consiste à afficher l'image ou les informations associées, et n'exécute pas réellement le dépôt. À ce stade, vous devez utiliser l'événement ondragover du document pour le tuer directement.
Propriété Event.effectAllowed : C'est l'effet de glissement.
