拖动相关的事件
- dragstart: 被拖动元素 开始拖动 时触发的事件。
- drag: 被拖动元素 拖动过程 触发的事件。
- dragend: 被拖动元素 停止拖动 时的触发事件。
- dragenter: 被拖动元素 进入目标元素/有效元素 时触发的事件。
- dragover: 被拖动元素 在目标元素/有效元素上移动 时触发的事件。
- dragleave: 被拖动元素 离开目标元素/有效元素 时触发的事件。
- drop: 被拖动元素 放置到目标元素/有效元素 时触发的事件。
相关事件的默认行为
- dragover: 默认不允许拖动行为。
- drop: 默认不允许放置行为。
dataTransfer
要实现拖动的需求，除了要用到拖动相关的事件，还需要用到 dataTransfer 对象来作为 被拖动元素 和 拖动元素 之间 传输数据 的桥梁。其主要的方法如下：
- event.dataTransfer.setData(dataType, data)
- dataType: 主要支持两种数据类型 Text 和 URL
- data: 要传输的数据，是字符串。
- event.dataTransfer.getData(dataType)
简单的图片拖动交换
文档的DOM结构
一个大 div 里面包裹 4个小 div ， 每个小 div 里面都有一个 img 图片。由于 img 标签的默认 draggable 是 true，所以不需要设置。
<div class="drag-wrap">
<div class="item" id="wrap1">
<img src="../wallpaper/01.jpg" id="img1" alt="picture">
</div>
<div class="item" id="wrap2">
<img src="../wallpaper/02.jpeg" id="img2" alt="picture">
</div>
<div class="item" id="wrap3">
<img src="../wallpaper/03.jpeg" id="img3" alt="picture">
</div>
<div class="item" id="wrap4">
<img src="../wallpaper/04.jpeg" id="img4" alt="picture">
</div>
</div>
js实现逻辑
分析：我们的拖动是在 drag-wrap 上进行的，所以我们只需要监听 drag-wrap 相关的拖动事件，然后通过 event.target 获取目标元素就可以了。
- 阻止 drag-wrap 的 dragover 默认行为。
let dragBox = document.getElementsByClassName('drag-wrap')[0];
dragBox.addEventListener('dragover', function (e) {
e.preventDefault(); // 默认不允许拖动行为，要阻止默认行为
}, false)
- 被拖动和拖动元素数据传输
dragBox.addEventListener('dragstart', function (e) {
console.log("start... \n target: " + e.target.id);
e.dataTransfer.setData('Text', e.target.id);
}, false)
- 设置放置监听事件
通过获取 dataTransfer 传输的被拖动元素的 id，通过交换被拖动图片元素和拖动图片元素的 src 即可。
dragBox.addEventListener('drop', function (e) {
e.preventDefault(); // 默认不允许放置元素行为，要阻止默认行为
console.log("end... \n target: " + e.target.id);
let data = e.dataTransfer.getData('Text');
let temp = e.target.src
e.target.src = document.getElementById(data).src;
document.getElementById(data).src = temp;
}, false)
效果
04.gif
连连看
最后写了一个简单的连连看游戏，简单地运用了上面的知识点。效果如下：
04.gif
连连看github地址：
https://github.com/Ertsul/Projects/tree/master/%E8%BF%9E%E8%BF%9E%E7%9C%8B
