最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
HTML5 drag和drop具体使用代码解析
时间:2022-06-25 17:52:48 编辑:袖梨 来源:一聚教程网
本篇文章小编给大家分享一下HTML5 drag和drop具体使用代码解析,文章代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。
简介
拖拽(Drag/Drop)是一个很普遍、很常用的操作,即抓取一个对象后,放到想要放的地方。 在H5中,拖拽是一个标准操作,任何元素都可以拖拽!! 但是!! 想要实现拖拽,需要添加 拖拽属性。
H5中拖拽属性:draggable: auto | true | false
注意:链接和图片默认是可拖动的,则不需要 draggable 属性。
- Drag(在拖拽目标时触发事件)
dragstart - 元素开始拖动时触发此事件
drag - 元素正在拖动时触发此事件
dragend - 元素拖动结束后触发此事件
- Drop(在目标区域释放时触发事件)
dragenter - 当被拖动的元素进入目标区域内时触发此事件
dragover - 当被拖动的元素在目标区域内拖动时触发此事件
dragleave - 当被拖动的元素离开目标区域时触发此事件
drop - 当被拖动的元素在目标区域被放下时触发此事件
拖拽步骤
设置元素属性draggable 为 true
左边区域可移动的文字一可移动的文字二可移动的文字三可移动的文字四可移动的文字五右边区域
拖动
dragstart 事件: 在进行拖放操作时,通过dataTransfer来实现数据的存储和获取,每个event事件对象中都会有DataTransfer对象用来保存被拖动的数据。它可以保存一项或多项数据、一种或者多种数据类型。
let left = document.getElementById('left') let target = document.getElementById('right') left.addEventListener('dragstart', (event) => { const target = event.target; // 在项目拖动的开始事件(ondragstart)的时候,可以对dataTransfer进行设值操作(setData)。 // 拖拽, dataTransfer 属性, 等于运输车 // 后续用 dataTransfer.getData获取 // 在项目拖动结束的时,可以获取dataTransfer对象里的值。 event.dataTransfer.setData('Text', target.id) // js 事件有冒泡机制 console.log('drag开始拖动啦1'); })
drag事件:在拖拽过程中一直执行
left.addEventListener('drag', (event) => { console.log('drag正在拖啦2'); })
dragend事件:结束
left.addEventListener('dragend', (event) => { console.log('dragend拖动结束啦7'); })
放置
dragenter 和dragleave 事件:进入或离开目标区域
target.addEventListener('dragenter', (event) => { console.log('dragenter进入区域啦3') }) target.addEventListener('dragleave', (event) => { console.log('dragleave离开拖动区域啦5') })
dragover事件:默认无法将数据/元素放置到其他元素中。如果需要设置允许放置,就要阻止元素的默认行为。
target.addEventListener('dragover', (event) => { // 阻止默认行为 event.preventDefault(); console.log('dragover在区域内拖动啦4') })
drop事件:放下
target.addEventListener('drop', (event) => { console.log('drop释放鼠标啦6') let drag_id = event.dataTransfer.getData('text') target.appendChild(document.getElementById(drag_id)) })
完整代码
左边区域可移动的文字一可移动的文字二可移动的文字三可移动的文字四可移动的文字五右边区域
相关文章
- 《无限暖暖》天星之羽获得位置介绍 12-20
- 《流放之路2》重铸台解锁方法介绍 12-20
- 《无限暖暖》瞄准那个亮亮的成就怎么做 12-20
- 《无限暖暖》魔气怪终结者完成方法 12-20
- 《无限暖暖》曙光毛团获得位置介绍 12-20
- 《无限暖暖》日光果获得位置介绍 12-20