1.简介
（1）蓝图
拖动源
放置目标
拖放并不是单纯的把目标从一个地方移动另一个地方，其实是促成成功交互的操作过程中的反馈。
光标指示当前的位置是否可防置目标
用户提示是移动、链接或者复制
鼠标经过的地方样式改变，提示此处可以放置。
为满足以上的要求，浏览器在拖拽的每个过程中发起一系列的事件。
数据传输：一组对象，这个对象用来公开存储，拖动数据存储是拖放操作的基础。可以将传输数据理解成拖放的中央控制部分，用于反馈的图片以及数据自身的检索全部都在数据传输中管理。类似网络传输谈判，此时根本无需让拖动源和放置目标知道彼此的存在。此时其重要作用的就是MIME类型！
（2）MIME 多功能因特网邮件扩展服务
text/plain
image/png
image/jpeg
text/x-age 传递自定义的信息类型
事件
事件捕获：从父辈–→中间–→子辈
事件冒泡：反向
event.stopPropagation //阻止事件沿事件捕获链向下传递 或者 通过冒泡阶段向上传递。
event.preventDefault //阻止事件的默认行为，比如链接跳转。
“------------------------------------------------------------------------------------------------------------”
2.H5拖拽的7个事件分别是
ondragstart 只能在这个事件的过程中支持dataTransfer通过setData来设置数据。这是为了安全考虑。编号1
ondrag 拖动过程中持续发生的事件。就是鼠标移动的过程中会反复的调用此事件。编号2
ondragenter 拖动跨入了页面中新元素的时候触发，适用于设置拖放的放置反馈。编号3
ondragleave 恢复放置反馈，与上一事件相对。编号4
ondragover 不同于drag事件，此事件是在当前鼠标停留的目标上调用。编号5
ondrop 释放鼠标调用，要放置包含处理放置动作的代码。编号6
ondragend 在拖动源中触发，适合清空拖动过程的状态。编号7
3.设置、传输和控制
设置可以拖动，很简单就一句话
<div id = "huang" draggable="true">
setData(formate, data) //设置数据
getData(formate) //获得数据
types 一数组形式返回所有当前注册的格式
items 返回所有想及其相关格式的列表
files 返回与放置相关的所有文件
clearData( )
//更改拖放反馈
setDragImage(element, x, y)：图片出现在鼠标的旁边，则x，y就是相对鼠标的偏移了。
addElement(element)通知浏览器将参数作为拖动反馈图像来绘制。？
//设置开发人员设置和查询
effecftAllowed( )设置参数，允许用户进行何种操作，copy/link/Move/组合
dropEffect( )
4.下面再进行展示一段代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width" initial-scale=1>
<title>拖拽7个事件</title>
<style>
body{
width: 100%;
height: 50%;
display: flex;
justify-content: space-between;
}
#left{
width: 150px;
height: 300px;
background-color: hotpink;
user-select: none;
}
#right{
width: 150px;
height: 300px;
background-color: skyblue;
user-select: none;
}
</style>
</head>
<body>
<div id="left" draggable="true">目标元素</div>
<div id="right" draggable="true">拖拽元素</div>
<script>
let n = 0;
//拖拽元素 你当前拖动的元素
const right = document.querySelector('#right');
//拖拽一瞬间
right.ondragstart = function () {
this.style.backgroundColor = 'red';
};
//连续触发
right.ondrag = function () {
document.title = n++
}
right.ondragend = function () {
this.style.backgroundColor = 'skyblue';
}
//目标元素 目的地，把拖动的元素，拖动到哪里
const left = document.querySelector('#left');
left.ondragenter = function () {
this.style.backgroundColor = 'orange';
//鼠标进入才行
this.innerText = '请释放鼠标';
}
left.ondragleave = function () {
this.style.backgroundColor = 'hotpink';
this.innerText = '鼠标离开';
};
//在目标元素上连续触发
left.ondragover = function (e) {
document.title = n++;
e.preventDefault();
e.stopPropagation();
return false;
};
//具体要做什么，非常重要
//在目标元素上释放鼠标
left.ondrop = function () {
//具体做啥操作,在此操作
console.log(123);
document.body.removeChild(right);
return false;
}
</script>
</body>
</html>
5.火狐与谷歌的兼容性问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>火狐兼容</title>
<style>
body{
width: 100%;
height: 50%;
display: flex;
justify-content: space-between;
}
*{
margin: 0;
padding: 0;
}
body>*{
width: 150px;
height: 300px;
user-select: none;
}
#left{
text-align: center;
background-color: hotpink;
line-height: 300px;
}
ul li{
text-align: center;
height: 35px;
line-height: 35px;
color: blue;
margin: 15px auto;
border: 2px dashed #dddddd;
}
</style>
</head>
<body>
<div id="left">请拖拽内容到此区域</div>
<ul id="list">
<li draggable="true">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
const aLi = document.querySelectorAll('li');
const list = document.getElementById('list');
aLi.forEach((item,index)=>{
//谷歌下
item.setAttribute('draggable','true');
item.ondragstart = function (e) {
console.log(e.dataTransfer);
const dt = e.dataTransfer;
//火狐
dt.setData('key',index);
}
})
//拖拽进入
left.ondragenter = function () {
this.innerText = '请释放你的鼠标';
};
//阻止默认事件
left.ondragover = function (e) {
e.preventDefault();
e.stopPropagation();
return false;
};
//拖拽离开目标物体时
left.ondragleave = function () {
this.innerText = '请拖拽内容到此区域';
};
//拖拽结束时
left.ondrop = function (e) {
const dt = e.dataTransfer;
console.log(dt.getData('key'));//获取索引
console.log(list);
list.removeChild(aLi[dt.getData('key')]);
}
</script>
</body>
</html>