HTML5原生的Drag和Drop,H5原生拖放(Drag and Drop)demo以及浏览器兼容性处理 |
您所在的位置:网站首页 › 处理h5浏览器兼容性 › 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') // 必要,设置离开后的样式 }) 参考资料文档 扩展: |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |