本文共 4830 字,大约阅读时间需要 16 分钟。
简介
拖拽(Drag/Drop)是一个很普遍、很常用的操作,即抓取一个对象后,放到想要放的地方。 在H5中,拖拽是一个标准操作,任何元素都可以拖拽!! 但是!! 想要实现拖拽,需要添加 拖拽属性。H5中拖拽属性:draggable: auto | true | false
注意:链接和图片默认是可拖动的,则不需要 draggable 属性。
- Drag(在拖拽目标时触发事件)
dragstart - 元素开始拖动时触发此事件
drag - 元素正在拖动时触发此事件 dragend - 元素拖动结束后触发此事件 - Drop(在目标区域释放时触发事件)dragenter - 当被拖动的元素进入目标区域内时触发此事件
dragover - 当被拖动的元素在目标区域内拖动时触发此事件 dragleave - 当被拖动的元素离开目标区域时触发此事件 drop - 当被拖动的元素在目标区域被放下时触发此事件 拖拽步骤 设置元素属性draggable 为 true1
2 3 4 5 6 7 8 9 10 11 12 13 <main class="main"> <div class="left" id="left"> <div class="txt-show">左边区域</div> <div class="dargable txt" id="txt1" draggable="true">可移动的文字一</div> <div class="dargable txt" id="txt2" draggable="true">可移动的文字二</div> <div class="dargable txt" id="txt3" draggable="true">可移动的文字三</div> <div class="dargable txt" id="txt4" draggable="true">可移动的文字四</div> <div class="dargable txt" id="txt5" draggable="true">可移动的文字五</div> </div> <div class="right" id="right"> <div class="txt-show">右边区域</div> </div> </main> 拖动dragstart 事件: 在进行拖放操作时,通过dataTransfer来实现数据的存储和获取,每个event事件对象中都会有DataTransfer对象用来保存被拖动的数据。它可以保存一项或多项数据、一种或者多种数据类型。
1
2 3 4 5 6 7 8 9 10 11 12 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事件:在拖拽过程中一直执行1
2 3 left.addEventListener('drag', (event) => { console.log('drag正在拖啦2'); }) dragend事件:结束1
2 3 left.addEventListener('dragend', (event) => { console.log('dragend拖动结束啦7'); }) 放置dragenter 和dragleave 事件:进入或离开目标区域
1
2 3 4 5 6 target.addEventListener('dragenter', (event) => { console.log('dragenter进入区域啦3') }) target.addEventListener('dragleave', (event) => { console.log('dragleave离开拖动区域啦5') }) dragover事件:默认无法将数据/元素放置到其他元素中。如果需要设置允许放置,就要阻止元素的默认行为。1
2 3 4 5 target.addEventListener('dragover', (event) => { // 阻止默认行为 event.preventDefault(); console.log('dragover在区域内拖动啦4') }) drop事件:放下1
2 3 4 5 target.addEventListener('drop', (event) => { console.log('drop释放鼠标啦6') let drag_id = event.dataTransfer.getData('text') target.appendChild(document.getElementById(drag_id)) }) 完整代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .main { display: flex; justify-content:space-around; } .left { width: 300px; height: 500px; border: 1px solid lightseagreen; margin-right: 10px; /* background-color: green; */ } .right { width: 300px; height: 500px; border: 1px solid lightseagreen; text-align: center; padding: 1px; /* background: red; */ } .txt { border: 1px solid gray; margin: 1px; padding: 5px; cursor: move; } </style> </head> <body> <main class="main"> <div class="left" id="left"> <div class="txt-show">左边区域</div> <div class="dargable txt" id="txt1" draggable="true">可移动的文字一</div> <div class="dargable txt" id="txt2" draggable="true">可移动的文字二</div> <div class="dargable txt" id="txt3" draggable="true">可移动的文字三</div> <div class="dargable txt" id="txt4" draggable="true">可移动的文字四</div> <div class="dargable txt" id="txt5" draggable="true">可移动的文字五</div> </div> <div class="right" id="right"> <div class="txt-show">右边区域</div> </div> </main> <script> let left = document.getElementById('left') let target = document.getElementById('right') left.addEventListener('dragstart', (event) => { event.dataTransfer.setData('Text', target.id) console.log('drag开始拖动啦1'); }) target.addEventListener('dragstart', (event) => { const target = event.target; event.dataTransfer.setData('Text', target.id) }) left.addEventListener('drag', (event) => { console.log('drag正在拖啦2'); }) left.addEventListener('dragend', (event) => { console.log('dragend拖动结束啦7'); }) target.addEventListener('dragenter', (event) => { console.log('dragenter进入区域啦3') }) target.addEventListener('dragover', (event) => { event.preventDefault(); console.log('dragover在区域内拖动啦4') }) left.addEventListener('dragover', (event) => { event.preventDefault(); }) target.addEventListener('dragleave', (event) => { console.log('dragleave离开拖动区域啦5') }) target.addEventListener('drop', (event) => { let drag_id = event.dataTransfer.getData('text') target.appendChild(document.getElementById(drag_id)) }) left.addEventListener('drop', (event) => { let drag_id = event.dataTransfer.getData('text') left.appendChild(document.getElementById(drag_id)) }) </script> </body> </html>转载地址:http://txevb.baihongyu.com/