在h5中，如果想拖拽元素，就必须为元素添加draggable=“true”. 图片和超链接默认就可以拖拽
<p id="pe" draggable="true">试着把我拖过去</p>
/学习拖拽，主要就是学习拖拽事件/
/*应用于被拖拽元素的事件
ondrag 应用于拖拽元素，整个拖拽过程都会调用–持续
ondragstart 应用于拖拽元素，当拖拽开始时调用
ondragleave 应用于拖拽元素，当鼠标离开拖拽元素时调用
ondragend 应用于拖拽元素，当拖拽结束时调用/
/*应用于目标元素的事件
ondragenter 应用于目标元素，当拖拽元素进入时调用
ondragover 应用于目标元素，当停留在目标元素上时调用
ondrop 应用于目标元素，当在目标元素上松开鼠标时调用
ondragleave 应用于目标元素，当鼠标离开目标元素时调用/
案例：
效果展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽</title>
<style>
#box1,#box2,#box3 {
width: 200px;
height: 200px;
border:1px solid red;
float: left;
margin-right: 20px;
}
p {
background: orange;
margin: 0;
margin-bottom:10px;
}
</style>
</head>
<body>
<div id="box1">
<!--在h5中，如果想拖拽元素，就必须为元素添加draggable="true". 图片和超链接默认就可以拖拽-->
<p id="p1" draggable="true">试着把我拖拽</p>
<p id="p2" draggable="true">试着把也我拖拽</p>
</div>
<div id="box2"></div>
<div id="box3"></div>
<script>
//改代码控制台可能较乱，无需要部分请自行注释
document.ondragstart = function(e){
/*通过事件捕获来获取当前被拖拽的子元素*/
/*通过dataTransfer来实现数据的存储与获取
* setData(format,data):
* format:数据的类型：text/html text/uri-list
* Data:数据:一般来说是字符串值*/
//e.target 获取当前拖拽的元素
console.log('a拖拽开始');
console.log(e.target);
e.dataTransfer.setData('text/html',e.target.id);
}
document.ondrag = function(){
// console.log('a拖拽持续中');
}
document.ondragleave = function(){
console.log('a拖拽离开当前元素');
}
document.ondragend = function(){
console.log('a鼠标松开拖拽结束');
}
document.ondragenter = function(){
console.log('b拖拽进入目标元素');
}
document.ondragover = function(e){
// console.log('b拖拽进入目标元素持续中');
/*如果想触发ondrop事件，那么就必须在这个位置阻止浏览器的默认行为*/
/*浏览器默认会阻止ondrop事件：我们必须在ondragover中阻止浏览器的默认行为*/
e.preventDefault();
}
document.ondrop = function(e){
console.log('b鼠标在目标元素松开发生');
/*通过e.dataTransfer.setData存储的数据，只能在drop事件中获取*/
var id = e.dataTransfer.getData('text/html');
e.target.appendChild(document.getElementById(id));//document.getElementById(id)不加引号
}
document.ondragleave = function(){
console.log('b离开目标元素');
}
</script>
</body>
</html>
本文属个人学习整理记载