Ne vous y trompez pas, cet article ne traite pas de la façon de nettoyer le sol. Les amis qui ont lu "javascriptEssence" devraient savoir que le processus de mise en œuvre du glisser-déposer est relativement compliqué. Les temps ont changé maintenant. Nous pouvons utiliser la nouvelle API de glisser-déposer pour <.> Il est très pratique d'obtenir l'effet glisser-déposer. Récemment, j'ai rencontré un collègue jardinier dans le jardin qui a écrit un article "HTML5 Advanced Series : API glisser-déposer pour réaliser le tri par glisser-déposer". C'est vraiment le travail d'un maître. En tant que débutant (pas maître), M. Xiong, je ne peux pas comparer avec cela, j'ai donc lancé le chapitre de base, j'espère que tous les amis du jardinage en tireront quelque chose.
1. Un exemple simple - ramasser quelques pierres au sol地上有石子，捡几个吧 我是篮子 我是地 石子 石子 石子 石子 石子 石子 石子 石子 石子 石子
attributs et méthodes . Que signifient ces attributs ? Venez un par un ci-dessous.
2. Étapes générales pour mettre en œuvre le glisser-déposer1. Trouver un élément déplaçable
Tout comme tout le monde ne s'appelle pas Big Bear, et pas tous les éléments peuvent être glissés. Les éléments img et a peuvent être déplacés par défaut, et les autres éléments ne peuvent pas être déplacés par défaut. À ce moment-là, vous pouvez ajouter draggable=true pour le rendre déplaçable.<p draggable='true'></p>
2. Gérer les événements liés au glisser-déposer
Tous les événements liés sont les suivants : (Ceci est tiré de : http://www.cnblogs.com/linxin/p/6794542.html) SourceObjet :
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>testEvents</title>
<style type="text/css">
.source{
width: 50px;
height: 50px;
border: 1px solid red;
}
.process{
width: 100px;
height: 100px;
border: 1px solid black;
margin-top: 10px;
}
.dest{
width: 100px;
height: 100px;
border: 1px solid green;
margin-top: 10px;
}
</style></head><body>
<p class="source" id="source" draggable="true"></p>
<p class="process" id="process"></p>
<p class="dest" id="dest"></p>
<script type="text/javascript">
window.onload=function(){ var source = document.getElementById("source"); var process = document.getElementById("process"); var dest = document.getElementById("dest"); var sourceEle;
source.addEventListener("dragstart",function(e){
console.log("source dragstart");
console.log(e);
sourceEle = e.target; var dt = e.dataTransfer;
dt.effectedAllowed = "all";
},false);
process.addEventListener("dragenter",function(e){
console.log("process dragenter");
console.log(e);
},false);
process.addEventListener("dragover",function(e){
console.log("process dragover");
console.log(e);
},false);
process.addEventListener("dragleave",function(e){
console.log("process dragleave");
console.log(e);
},false);
source.addEventListener("drag",function(e){
console.log("source drag");
console.log(e);
},false);
dest.addEventListener("dragend",function(e){
console.log("dest dragend");
console.log(e);
e.preventDefault();
},false);
dest.addEventListener("drop",function(e){
console.log("dest drop");
console.log(e);
dest.appendChild(sourceEle);
e.preventDefault();
e.stopPropagation();
},false);
document.ondragover = function(e){e.preventDefault();}
document.ondrop = function(e){e.preventDefault();}
} </script></body></html>, ici le premier est défini sur effectAllowed et le second est sélectionné à l'aide de la 
liste déroulante
J'ai testé la méthode sur Ubuntu chromeome et j'ai trouvé que ils sont tous d'une seule main, mais il ne peut pas être glissé lorsqu'il est défini sur aucun. Il peut y avoir des différences selon les systèmes.
À propos des méthodes setData() et getData()
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>testEvents</title>
<style type="text/css">
.source{
width: 50px;
height: 50px;
border: 1px solid red;
}
.process{
width: 100px;
height: 100px;
border: 1px solid black;
margin-top: 10px;
}
.dest{
width: 100px;
height: 100px;
border: 1px solid green;
margin-top: 10px;
}
</style></head><body>
<select id="dpe">
<option value="copy">copy</option>
<option value="move">move</option>
<option value="link">link</option>
<option value="none">none</option>
</select>
<p class="source" id="source" draggable="true"></p>
<p class="process" id="process"></p>
<p class="dest" id="dest"></p>
<script type="text/javascript">
window.onload=function(){ var source = document.getElementById("source"); var process = document.getElementById("process"); var dest = document.getElementById("dest"); var dpe = document.getElementById("dpe"); var dpev;
dpe.onchange = function(){
dpev = this.value;
} var sourceEle;
source.addEventListener("dragstart",function(e){
console.log("source dragstart");
console.log(e);
sourceEle = e.target; var dt = e.dataTransfer;
dt.effectedAllowed = "all";
},false);
dest.addEventListener("dragend",function(e){
console.log("dest dragend");
console.log(e);
e.preventDefault();
},false);
dest.addEventListener("drop",function(e){
console.log("dest drop");
console.log(e);
dest.appendChild(sourceEle);
e.preventDefault();
e.stopPropagation();
},false);
document.ondragover = function(e){
e.dataTransfer.dropEffect = dpev;
e.preventDefault();
}
document.ondrop = function(e){e.preventDefault();}
} </script></body></html>, le second est data ; ce dernier passe un paramètre, qui est de type MIME. Les types MIME disponibles sont text/plain, text/html, text/
xml
Cas de test, faites glisser l'élément de menu sur le bloc-notes.
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>点菜</title>
<style type="text/css">
.menu{
width: 200px;
height: 300px;
border: 1px solid red;
margin-right: 10px;
float: left;
}
.record{
width: 200px;
height: 300px;
border: 1px solid black;
margin-right: 10px;
float: left;
}
</style></head><body>
<ul class="menu" id="menu">
<li draggable="true">糖醋排骨</li>
<li draggable="true">青椒肉丝</li>
<li draggable="true">武昌鱼</li>
<li draggable="true">手撕包材</li>
<li draggable="true">千叶豆腐</li>
</ul>
<ul class="record" id="record">
</ul>
<script type="text/javascript">
window.onload = function(){ var menu = document.getElementById("menu"); var record = document.getElementById("record");
menu.addEventListener("dragstart",function(e){ var dt = e.dataTransfer; var tar = e.target; if(tar.tagName=="LI"){
dt.setData("text/plain",tar.innerHTML);
}
dt.effectedAllowed = "all";
},false);
record.addEventListener("drop",function(e){ var li = document.createElement("li");
li.appendChild(document.createTextNode(e.dataTransfer.getData("text/plain")));
record.appendChild(li);
e.stopPropagation();
},false);
record.addEventListener("dropend",function(e){
e.preventDefault();
},false);
document.addEventListener("dragover",function(e){e.preventDefault()},false);
document.addEventListener("drop",function(e){e.preventDefault()},false);
} </script></body></html>关于setDragImage(Element img,long x,long y)
这个方法是设置拖放时的图标的，第一个参数表是图标元素，第二个表示相对与光标的水平偏移，第三个是垂直的。
还是前面的例子，在dragstart事件添加下面的代码，拖动时你会发现一只很大的手（不要被吓到）;
var img = document.createElement("img");
img.src = "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1493802056263&di=232de2c30491e19f32833669ad5a67ae&imgtype=0&src=http%3A%2F%2Fstatic.freepik.com%2Ffree-photo%2Fone-finger_318-10333.jpg";
dt.setDragImage(img,10,10);
上面的例子已经谈到了拖放的数据传递方法，这里在总结一下。
1、通过dataTransfer的setData()和getData()方法传递
2、通过闭包的方法，请参考开篇的例子。
HTML5的拖放api非常简洁实用，为我们省去了很多麻烦，如果没有它，我们可能需要通过mousedownmousemove等等事件才能实现上述功能。本文较为详细的介绍了相关api，希望对你有所帮助。关于拖放api的应用大家可以参看下面链接的文章，他做了一个拖放排序，这是一个比较常见的应用场景。
大～熊同学的粉丝数正在逼近三位数，感谢各位园友的支持，大～熊会继续努力的！
参考：
http://www.cnblogs.com/ijjyo/p/4316232.html
http://www.cnblogs.com/linxin/p/6794542.html
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!
Linux ajoute une méthode de source de mise à jour
Connaissances nécessaires pour le front-end Web
Quel est le mot de passe du service mobile ?
Comment résoudre l'écran bleu 0x0000006b
Qu'est-ce qu'un ETF Bitcoin Futures ?
Applications logicielles de spéculation monétaire formelles et faciles à utiliser recommandées en 2024
Prévisions futures d'ondulation
Que dois-je faire si mon ordinateur ne s'allume pas ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
