drag 和drop？ 来看这个详解吧！！
简介
拖拽（Drag/Drop）是一个很普遍、很常用的操作，即抓取一个对象后，放到想要放的地方。
在H5中，拖拽是一个标准操作，任何元素都可以拖拽！！
但是！！ 想要实现拖拽，需要添加 拖拽属性。
H5中拖拽属性：
draggable： auto | true | false
注意：链接和图片默认是可拖动的，则不需要 draggable 属性。
- Drag（在拖拽目标时触发事件）
-
dragstart - 元素开始拖动时触发此事件
-
drag - 元素正在拖动时触发此事件
-
dragend - 元素拖动结束后触发此事件
- Drop（在目标区域释放时触发事件）
-
dragenter - 当被拖动的元素进入目标区域内时触发此事件
-
dragover - 当被拖动的元素在目标区域内拖动时触发此事件
-
dragleave - 当被拖动的元素离开目标区域时触发此事件
-
drop - 当被拖动的元素在目标区域被放下时触发此事件
拖拽步骤
- dragstart 事件： 在进行拖放操作时，通过dataTransfer来实现数据的存储和获取，每个event事件对象中都会有DataTransfer对象用来保存被拖动的数据。它可以保存一项或多项数据、一种或者多种数据类型。
- drag事件：在拖拽过程中一直执行
- dragend事件：结束
- dragenter 和dragleave 事件：进入或离开目标区域
- dragover事件：默认无法将数据/元素放置到其他元素中。如果需要设置允许放置，就要阻止元素的默认行为。
- drop事件：放下
完整代码
<!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>小记
-
dragstart事件中通过dataTransfer来实现数据的存储和获取，每个event事件对象中都会有DataTransfer对象用来保存被拖动的数据。在项目拖动的开始事件(ondragstart)的时候，可以对dataTransfer进行设值操作(setData)。event.dataTransfer.setData() 进行设值，在拖动结束后，可以通过event.dataTransfer.getData()获取dataTransfer对象里的值。
-
浏览器默认无法将数据/元素放置到其他元素中，如果需要设置允许放置，就要阻止元素的默认行为。通过event.preventDefault()阻止。
-
可以通过添加css样式进行对拖拽效果的改变。例：dragSrc.classList.add(‘ds’) 。使用classList在元素中添加，移除及切换 CSS 类，classList 属性是只读的，但可以使用 add() 和 remove() 方法修改它。
-
使用 appendChild() 方法移除元素到另外一个元素。
-
HTML Drag and Drop API
-
DataTransfer()
-
HTML DOM appendChild() 方法
-
HTML DOM addEventListener() 方法
总结
以上是生活随笔为你收集整理的drag 和drop？ 来看这个详解吧！！的全部内容，希望文章能够帮你解决所遇到的问题。
