简介
拖拽（Drag/Drop）是一个很普遍、很常用的操作，即抓取一个对象后，放到想要放的地方。 在H5中，拖拽是一个标准操作，任何元素都可以拖拽！！ 但是！！ 想要实现拖拽，需要添加 拖拽属性。
H5中拖拽属性：draggable： auto | true | false
注意：链接和图片默认是可拖动的，则不需要 draggable 属性。
- Drag（在拖拽目标时触发事件）
- dragstart - 元素开始拖动时触发此事件
- drag - 元素正在拖动时触发此事件
- dragend - 元素拖动结束后触发此事件
- Drop（在目标区域释放时触发事件）
- dragenter - 当被拖动的元素进入目标区域内时触发此事件
- dragover - 当被拖动的元素在目标区域内拖动时触发此事件
- dragleave - 当被拖动的元素离开目标区域时触发此事件
- drop - 当被拖动的元素在目标区域被放下时触发此事件
拖拽步骤
设置元素属性draggable 为 true
<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对象用来保存被拖动的数据。它可以保存一项或多项数据、一种或者多种数据类型。
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))
})
完整代码
<!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() 方法
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。