js的拖动相关

拖动相关的事件

dragstart: 被拖动元素 开始拖动 时触发的事件。
drag: 被拖动元素 拖动过程 触发的事件。
dragend: 被拖动元素 停止拖动 时的触发事件。
dragenter: 被拖动元素 进入目标元素/有效元素 时触发的事件。
dragover: 被拖动元素 在目标元素/有效元素上移动 时触发的事件。
dragleave: 被拖动元素 离开目标元素/有效元素 时触发的事件。
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，所以不需要设置。

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

连连看

最后写了一个简单的连连看游戏，简单地运用了上面的知识点。效果如下：