前言

代码下面自取：

该篇文章主要是想和大家分享一个简单的拖拽的小demo，下面让我们一起去看看吧~

正文

实现的大概思路：

• 定义五个类名为empty的div容器
• 第一个div容器内放一个类名为fill的div容器
• 获取到类名为fill的div容器fill
• 获取五个类名为empty的div容器empties
• 给fill绑定两个事件监听分别为dragstart和dragend
• dragstart：当把图片开始拖拽的时候触发回调函数dragStart

dragStart：给调用该函数的容器添加一个类hold，该类实现的是将边框加粗和改变了边框颜色

function dragStart() {
    this.classList.add('hold');
}

• dragend：当把图片结束拖拽的时候触发回调函数dragEnd

dragend：移除hold类

function dragEnd() {
    this.classList.remove('hold');
}

• 通过for-of遍历empties，为每一个empty绑定四个时间监听 1. dragover：经过该empty时触发

function dragOver(e) {
    e.preventDefault();
    console.log('over');
}

2. dragenter：进入该empty时触发，添加一个类hovered

function dragEnter(e) {
    e.preventDefault();
    this.classList.add('hovered');
    console.log('enter');
}

3. dragleave：离开该empty时触发，移除类hovered

function dragLeave() {
    this.classList.remove('hovered');

}

4. drop：放下到该empty时触发，通过append在该DOM元素最后面添加一个类fill，也就是实现了推拽

function dragDrop() {
    console.log('drop');
    this.className = 'empty'
    this.append(fill);
}

结语