拖拽元素支持的事件
ondrag 应用于拖拽元素，整个拖拽过程都会调用
ondragstart 应用于拖拽元素，当拖拽开始时调用
ondragleave 应用于拖拽元素，当鼠标离开拖拽元素是调用
ondragend 应用于拖拽元素，当拖拽结束时调用
目标元素(放置对象)支持的事件
ondragenter 应用于目标元素，当拖拽元素进入时调用
ondragover 应用于目标元素，当停留在目标元素上时调用
ondrop 应用于目标元素，当在目标元素上松开鼠标时调用
ondragleave 应用于目标元素，当鼠标离开目标元素时调用
draggable 属性
true： 元素可以被拖拽
false：元素不能被拖拽
auto：浏览器自己判断元素是否能被拖拽 ( 默认 )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father{
height: 200px;
border: 1px solid rgb(240, 74, 74);
}
.son{
width: 100px;
height: 100px;
border: 1px solid rgb(87, 233, 51);
float: left;
margin: 10px;
}
body{
height: 400px;
}
</style>
<script>
window.onload = function(){
var father = document.querySelector('.father');
var sons = document.querySelectorAll('.son');
sons = Array.from(sons);
sons.forEach(function(item){
// 拖放对象
item.ondragstart = function() {
event.dataTransfer.setData('id',item.id);
};
// 正在拖放
item.ondrag = function(){
};
// 拖放结束
item.ondragend = function(){
};
});
// 放置对象事件
// 将拖放元素拖放到放置对象当中
father.ondragenter = function(){
};
// 在放置对象中拖放
father.ondragover = function(){
// 取消事件默认行为
event.preventDefault();
};
// 将拖放对象放置在放置对象中
father.ondrop = function(){
var id = event.dataTransfer.getData('id');
var dom = document.querySelector('#'+id);
this.appendChild(dom);
// 阻止事件冒泡
event.stopPropagation();
}
document.body.ondragover = function(event){
event.preventDefault();
}
document.body.ondrop = function(event){
var id = event.dataTransfer.getData('id');
var dom = document.querySelector('#'+id);
this.appendChild(dom);
}
}
</script>
</head>
<body>
<div class="father"></div>
<!-- draggable="true" 表示允许拖放 -->
<div class="son" id="one" draggable="true">1</div>
<div class="son" id="two" draggable="true">2</div>
<div class="son" id="three" draggable="true">3</div>
<div class="son" id="four" draggable="true">4</div>
</html>
效果如下
