我们需要先搭建一个这样的页面结构，实现要求：
小方块能被拖进上面的大div里，且能再拖拽回下方
html：在这里我们给每一个child添加了一个draggable="true"代表元素可拖拽
<body>
<!-- 放置元素 parent 放置事件:dragenter dragover drop -->
<div class="parent"></div>
<!-- 拖拽元素 child 拖动事件：dragstart drag dragend -->
<!-- 设置当前元素可拖拽 draggable="true"表示可以拖拽 默认为false -->
<div class="child" id="one" draggable="true">one</div>
<div class="child" id="two" draggable="true">two</div>
<div class="child" id="three" draggable="true">three</div>
<div class="child" id="four" draggable="true">four</div>
<div class="child" id="five" draggable="true">five</div>
</body>css：
<style>
.parent{
height: 200px;
width: 1000px;
border: 3px solid cadetblue;
}
.child{
width: 100px;
height: 100px;
background-color: aquamarine;
color: aliceblue;
float: left;
margin: 10px 0 0 10px;
}
</style>接下来我们要知道拖拽事件需要用到哪些知识：
用在拖动事件上（本案例中的child）：
用在放置事件上（本案例中的parent）：
由于浏览器是默认不允许拖放操作的实现，因此我们可以在放置事件中设置一个： event.preventDefault(); 将将放置元素设置为可放置。
同上，当我们想要将拖拽元素从放置元素中拖出时，也需要给body设置一个event.preventDefault(); 使得元素可以再次拖出。
dataTransfer:
dataTransfer是一个用来保存拖动及放置过程中的数据的对象，可以保存一项或者多项数据，可以是一种或者多种数据类型，用于拖动拖动元素与放置元素之间的数据传递。
这个对象可以从所有的拖拽事件 drag events 的 dataTransfer 属性上获取。
在拖动事件中设置 dataTransfer.setData(key,value) 将拖动元素的id传出去；
在放置事件中通过 dataTransfer.getData(key); 来获取到拖动元素中传出来的id，通过数据获取节点，放置节点。
拖拽事件流：
当拖动一个元素放置到目标元素上的时候将会按照如下顺序依次触发
dragstart->drag->dragenter->dragover->drop->dragend
案例中的console.log()都是为了测试的，实际应用时可以不需要将每一条过程都打印出啦。
<script>
window.onload=function(){
var parent = document.getElementsByClassName('parent')[0];
var childs = document.getElementsByClassName('child');
// console.log(parent,childs);
// 将类数组转换为数组
childs=Array.from(childs);
childs.forEach(function(item){
// 拖动事件
// 开始拖动
item.ondragstart=function(event){
console.log('ondragstart开始拖动了');
console.log(event,'事件对象');
// 将拖动元素的id传出去
//dataTransfer.setData 传输数据 key value
console.log(item.id);
event.dataTransfer.setData('id', item.id)
}
// 正在拖动
item.ondrag=function(){
console.log('正在拖动');
}
// 拖动结束
item.ondragend=function(){
console.log('ondragend拖动结束');
}
})
// 放置事件 -- 放置元素 parent
// 进入到放置元素
parent.ondragenter=function(){
console.log('ondragenter进入到放置元素');
}
// 在放置元素内移动
parent.ondragover=function(){
console.log('ondragover在放置元素内移动');
//将放置元素设置为可放置
event.preventDefault();
}
// 放置拖动元素到放置元素
parent.ondrop=function(event){
console.log('ondrop放置');
// 获取拖动元传输的数据getData(key)
console.log(event.dataTransfer.getData('id'),'事件对象');
var id = event.dataTransfer.getData('id');
this.appendChild(document.querySelector('#'+ id));
// 阻止事件冒泡
event.stopPropagation();
}
// 将拖动元素到放到body
document.body.ondragover=function(){
console.log('ondragover在放置元素内移动');
//将放置元素设置为可放置
event.preventDefault();
}
// 放置拖动元素到放置元素
document.body.ondrop=function(event){
console.log('ondrop放置');
// 获取拖动元传输的数据getData(key)
console.log(event.dataTransfer.getData('id'),'事件对象');
var id = event.dataTransfer.getData('id');
// 通过数据获取节点，放置节点
this.appendChild(document.querySelector('#'+ id));
// 阻止事件冒泡
event.stopPropagation();
}
}
</script>
本文含有隐藏内容，请 开通VIP 后查看