1.H5是属于移动端的，不存在兼容问题，在HTML中写上draggable=“true” 打开元素，可以拖拽元素，下面就用一段代码来进行展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽</title>
<style>
#box{
width: 300px;
height: 150px;
background-color: pink;
position: absolute;
left: 100px;
top:50px;
}
</style>
</head>
<body>
<div id="box" draggable="true">
</div>
<script>
//第三阶段都是移动端的，不存在兼容问题
//draggable="true" 打开元素，可以拖拽元素
let box = document.getElementById('box');
//按下 拖拽的写法 原生拖拽的写法
// box.onmousedown = function (e) {
// let x = e.clientX - this.offsetLeft;
// let y = e.clientY - this.offsetHeight;
//
// //移动
// document.onmousemove = function (e) {
// box.style.cssText = `left:${e.clientX-x}px;top:${e.clientY-y}px`;
// }
// document.onmouseup = function () {
// document.onmousemove = null;
// document.onmouseup = null;
// }
// }
//H5写法
//拖拽
box.ondragover = function (e) {
this.style.cssText = `left:${e.clientX-100}px;top:${e.clientY-100}px`;
};
//拖拽结束
box.ondragend = function (e) {
this.style.cssText = `left:${e.clientX-100}px;top:${e.clientY-100}px`;
}
//拖拽7个事件
</script>
</body>
</html>