3.1 拖拽属性
draggable：auto | true | false
<div id="mydiv" draggable="true"></div>
3.2 拖动事件
| 属性 | 解释 |
|---|---|
| dragstart（托） | 当一个原不俗开始被拖拽的时候触发 |
| drag（托） | 这个事件在拖拽源触发 |
| dragend（托） | 拖拽源在拖拽操作结束将得到dragend事件对象，不管操作成功与否。 |
| dragenter（放） | 当拖拽中的鼠标第一次进入一个元素的时候触发。 |
| dragover（放） | 当拖拽中的鼠标移动经过一个元素的时候触发 |
| dragleave（放） | 当拖拽的鼠标离开元素时触发 |
| drop（放） | 这个事件在拖拽操作结束释放元素上触发。 |
3.3 拖操作
<div id="mydiv" draggable="true"></div>
<script>
// 拖放操作
let mydiv = document.getElementById('mydiv')
//开始拖放
mydiv.ondragstart = function(){
console.log('开始拖放');
}
// 正在拖放
mydiv.ondrag = function(){
console.log('正在拖放');
}
// 结束拖放
mydiv.ondragend = function(){
console.log('正在拖放');
}
</script>
3.4 放操作
注意：放操作中 ”dragover和drop“ 会发生冲突，需要阻止 dragover 的默认事件（ e.preventDefault() ）
<div id="put" draggable="true"></div>
<script>
// 放操作
let myput = document.getElementById('put')
// 进入
myput.ondragenter = function(e){
console.log('进入了');
}
// 进故宫
myput.ondragover = function(e){
console.log('经过了');
// 阻止默认事件
e.preventDefault();
}
// 离去
myput.ondragleave = function(){
console.log('离去了');
}
// 放下
myput.ondrop = function(){
console.log('放下了');
}
</script>
3.5 拖和放的API操作
3.5.1 拖放事件
一般在一个元素开始被拖拽的时候，触发dragstart时候设置与这次拖拽相关的信息，例如拖动的数据和图像。所有的拖拽事件都有一个属性——dataTransfer，它包含着拖拽数据。
3.5.2 dataTransfer的属性说明
| 属性/方法 | 说明 |
|---|---|
| files | 其属性返回和防止相关的所有文件 |
| types | 属性使用数组的形式返回当前注册的格式 |
| effectAllowed | 此属性的意思为通知浏览器当前可被用户选用的操作，如果只设置 copy，这只允许执行出 copy 工作 |
| dropEffect | 拖放的操作类型，决定了浏览器如何显示鼠标形状，可能的值为 copy，move，link 和 none |
| items | 属性返回所有项与相关格式的所有文件 |
| setData( format,data) | 在 dragstart 事件调用此函数在 dataTransfe 对象上的存储数据。 |
| getData(format) | 从 dataTransfer 对象取出数据 |
| setDragImage(element,x,y) | 使用存在的图像元素作为拖动图像(x,y 表示鼠标位置) |
| addElement(element) | 调用此函数需要提供一个页面元素作为参考，同时使用此参数作为拖放反馈图像 |
| clearData() | 不传参数，表示清空所有已注册数据，带参数则清楚指定的注册数据 |
3.5.3 演示示例：
<div id="contains"></div>
<div id="div1" class="myBlock" draggable="true">1</div>
<div id="div2" class="myBlock" draggable="true">2</div>
<div id="div3" class="myBlock" draggable="true">3</div>
<div id="div4" class="myBlock" draggable="true">4</div>
<div id="div5" class="myBlock" draggable="true">5</div>
<script>
// 元素的拖
let myBlock = document.querySelectorAll('.myBlock')
for(let i = 0; i< myBlock.length; i++){
myBlock[i].ondragstart = function(e){
// dataTransfer是 event事件
// 储存id
e.dataTransfer.setData('id',this.id)
// 设置拖放时 物体的显示
let img = new Image();
img.src = './素材.jpg'
e.dataTransfer.setDragImage(img,img.width/2,img.height/2)
// 为啥 第一次不显示？
}
}
// 放
let contains = document.getElementById('contains')
// 1，阻止 ondragover的默认事件
contains.ondragover = function(e){
e.preventDefault();
}
// 托 的元素放下时
contains.ondrop = function(e){
// 获取之前存储的 id
let id = e.dataTransfer.getData('id')
// 根据id 获取当前元素
let div = document.getElementById(id)
this.appendChild(div)
}
</script>
3.5.4 外部文件的操作
注意： 托外部文件需要取消 ondrop 的默认事件，否则会打开这个文件
<script>
let html = document.documentElement;
// 取消默认事件,防止打开文件
html.ondragover = function(e){
e.preventDefault();
}
// 文件拖放
html.ondrop = function(e){
// 取消默认事件
e.preventDefault()
let img = new Image();
// 获取文件路径
img.src = window.URL.createObjectURL(e.dataTransfer.files[0])
img.style.top = e.pageY + 'px';
img.style.left = e.pageX + 'px';
document.body.appendChild(img)
}
</script>
