HTML5原生的Drag和Drop,H5原生拖放(Drag and Drop)demo以及浏览器兼容性处理
H5原生拖放(Drag and Drop)demo以及浏览器兼容性处理
这篇文章发布于 2020/08/22，归类于 JavaScript
标签：
js拖拽，原生js拖放，js拖放，js拖放浏览器兼容性，HTML5 拖放，dragstart，drop
一般在网页中，如果需要实现拖放，首先要有两个元素
可拖动的元素，元素draggable="true"属性就是可拖放，如果设置为false就是不可拖放
可以放置的区域，注意chrome如果不将放置区域的onenter和onover事件阻止默认行为，无法触发drop函数
拖放的过程中的钩子
拖动元素时，会触发元素的 dragstart 钩子函数，在函数里可以设置数据、以及拖动到放置区域的鼠标样式
当拖动元素进入放置区域时，放置区域元素会触发一次dragenter钩子(拖动进入)，触发多次dragover(拖动元素在放置区域移动中)，放下时再触发放置元素的drop钩子，这里可以用来接收拖拽元素dragstart设置的data，处理拖动的行为
注意事项：浏览器兼容性处理
在Chrome中，放置区域的ondrop事件不触发，需要在onenter和onover事件里阻止默认行为(火狐不需要这样处理)
event.dataTransfer.effectAllowed只能设置鼠标样式，不能设置拖动元素行为，drag后之前的元素会消失，想要保留需要使用cloneNode来操作
// 放置后，删除原来的图片
// ev.target.appendChild(document.querySelector(`#${reciveData}`))
// 放置后，保留原图片
ev.target.appendChild(document.querySelector(`#${reciveData}`).cloneNode(true))
在Firefox(火狐)浏览器里drop图片后，会新在新的tab也打开图片，不仅要在drop里阻止默认行为，还要阻止事件冒泡
demo实例
demo如下，demo 在线体验地址，demo github源码
// 被拖动元素的事件监听
let img = document.getElementById('img')
// 当元素开始拖动时触发，仅触发一次
img.addEventListener('dragstart', (ev) => {
// 设置值，在放置区域触发drop事件时，可以通过ev.dataTransfer.getData获取这里的值
ev.dataTransfer.setData("text", ev.target.id)
// link 会影响拖动到放置区域的鼠标样式，只是样式，并不决定行为
ev.dataTransfer.effectAllowed = 'copy';
})
// 放置区域A的事件监听
let targetA = document.getElementById('targetA')
// 当有拖动元素(放到)落到放置区域时触发，一次
targetA.addEventListener('drop', (ev) => {
ev.stopPropagation(); // 必要，阻止冒泡，防止火狐浏览器放置图片后打开新的窗口
ev.preventDefault(); // 必要，阻止默认行为 防止火狐浏览器放置后直接打开图片
// 放置落下时，接收被拖拽的元素在 dragstart时用ev.dataTransfer.setData设置的值
// 这里传的id备用
let reciveData = ev.dataTransfer.getData("text")
console.log('drop, recive data', reciveData, ev.dataTransfer.dropEffect)
// 必要，设置拖动后放置的效果，移动还是copy
// 放置后，删除原来的图片
// ev.target.appendChild(document.querySelector(`#${reciveData}`))
// 放置后，保留原图片
ev.target.appendChild(document.querySelector(`#${reciveData}`).cloneNode(true))
ev.target.classList.remove('active') // 必要，放置在区域里后，还原样式
})
// 当拖动元素移动到放置区域时触发，触发多次
targetA.addEventListener('dragover', (ev) => {
ev.preventDefault() // 必要，chrome drop兼容必须
})
// 当拖动元素进入放置区域时触发，一次
targetA.addEventListener('dragenter', (ev) => {
ev.preventDefault() // 必要，chrome drop兼容必须
ev.target.classList.add('active') // 必要，设置进入时的样式
})
// 当拖动元素离开放置区域时触发，一次
targetA.addEventListener('dragleave', (ev) => {
ev.target.classList.remove('active') // 必要，设置离开后的样式
})
参考资料文档
扩展：