简介
拖拽（ Drag /Drop）是一个很普遍、很常用的操作，即抓取一个对象后，放到想要放的地方。 在H5中，拖拽是一个标准操作，任何元素都可以拖拽！！ 但是！！ 想要实现拖拽，需要添加 拖拽属性。
H5中拖拽属性：draggable： auto | true | false
注意：链接和图片默认是可拖动的，则不需要 draggable 属性。
- Drag（在拖拽目标时触发事件）
dragstart - 元素 开始 拖动时触发此事件 drag - 元素正在拖动时触发此事件 dragend - 元素拖动结束后触发此事件- Drop（在目标区域释放时触发事件）
dragenter - 当被拖动的元素进入目标区域内时触发此事件 dragover - 当被拖动的元素在目标区域内拖动时触发此事件 dragleave - 当被拖动的元素离开目标区域时触发此事件 drop - 当被拖动的元素在目标区域被放下时触发此事件拖拽步骤
设置元素属性draggable 为 true
< ;m ai n class="main">
<div class="left" id="left">
<div class="txt -s how">左边区域</div>
<div class="d arg able 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 事件： 在进行拖放操作时，通过data transfer 来实现数据的存储和获取，每个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.p rev entDefault();
console.log('dragover在区域内拖动啦4')
})
drop事件：放下
target.addEventListener('drop', (event) => {
console.log('drop释放鼠标啦6')
let drag_id = event.dataTransfer.getData('text')
target.ap PE ndChild(document.getElementById(drag_id))
})
完整代码
<!DOCTYPE ht ML >
<html lang="en">
<head>
<meta charset="UTF-8">
<meta n am e="viewport" content="width=device-width, in IT ial-scale=1.0">
<title>Document</title>
<style>
.main {
dis play : flex;
justify-content:space-around;
}
.left {
width: 300px;
h ei ght: 500px;
border: 1px solid lightseagreen;
mar gin -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. PR eventDefault();
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() 方法
到此这篇关于HTML5 drag和drop具体使用详解的 文章 就介绍到这了,更多相关HTML5 drag和drop内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！
总结
以上是 为你收集整理的 HTML5 drag和drop具体使用详解 全部内容，希望文章能够帮你解决 HTML5 drag和drop具体使用详解 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于HTML5 drag和drop具体使用详解的详细内容...