# HTML 元素丝滑拖拽
需求，如下图：
- 将蓝色块拖拽到右侧蓝框释放区
- 拖拽蓝色块时变为红色，释放时恢复蓝色
- 拖拽蓝色块到蓝框释放区时蓝框变为红色，释放或离开时恢复蓝色
- 蓝色块拖拽到蓝框中释放时从原来位置删除，并插入到蓝框中并自动布局
首先想到的可能使用鼠标事件模拟
比如 mousedown、mousemove、mouseup 事件模拟
可以、妥妥的可以
但浏览器提供了 drag 与 drop 相关事件解决了这个问题
体验丝滑、兼容主流浏览器
当然还有其他的优势
比如
不用处理蓝色块与蓝框碰到检测了
不用处理拖出屏幕外了
当然还有很多
比如减少了工作了时间
多出了摸鱼时间
更多好处
直接上源码：
1. html 部分
<div class="drag-ele" draggable="true" id="drag-ele"></div>
<div class="drop-zone" id="drop-zone"></div>
1
2
2
2. css 部分
.drag-ele {
width: 100px;
height: 100px;
background-color: blue;
}
.drop-zone {
width: 500px;
height: 600px;
border: 4px solid blue;
position: absolute;
right: 0;
top: 100px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
3. javascript 脚本实现
let dragEle = document.getElementById('drag-ele')
let dropZone = document.getElementById('drop-zone')
// 蓝色块开始拖拽，背景变红
dragEle.addEventListener('dragstart', function(ev) {
ev.currentTarget.style.background = 'red'
ev.dataTransfer.setData('text/plain', ev.target.id)
})
// 蓝色块结束拖拽，恢复蓝色背景，释放区恢复蓝色边框
dragEle.addEventListener('dragend', function(ev) {
dragEle.style.background = 'blue'
dropZone.style.borderColor = 'blue'
})
// 蓝色块到达指定蓝框时，蓝框边框变红
dropZone.addEventListener('dragover', function(ev) {
ev.currentTarget.style.borderColor = 'red'
ev.preventDefault()
})
// 蓝色块在指定蓝框释放时，插入到蓝框中
dropZone.addEventListener('drop', function(ev) {
ev.preventDefault()
let data = ev.dataTransfer.getData('text/plain')
let block = document.getElementById(data)
ev.target.appendChild(block)
ev.dataTransfer.clearData()
})
// 蓝色块离开指定释放区 - 恢复蓝色背景
dropZone.addEventListener('dragleave', function(ev) {
ev.currentTarget.style.borderColor = 'blue'
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
以上注意事件所绑定的目标元素
# 优质搜罗
# 字符串 startsWith 与 endsWith
没什么好说的
只是注意下拼写
starts 非 start
ends 非 end
let str = 'hello, foo'
// startsWith：判断字符串是否以指定字符开头
str.startsWith('he') // true
str.startsWith('llo') //false
// endsWith：判断字符串是以指定字符结尾
str.endsWith('foo') // true
str.startsWith('foos') // false
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# screenfull.js 源码解析
screenfull.js 三方库源码及使用演示
扩展部分更精彩
# 聊点别的
写代码前要好好设计下
想清楚了
最好画图、用语言清晰描述出来
上来一通乱干
太闹心了
结果，写了大半
发现有更好的方案
是改还是不改，进退两难
这就是技术债
最后决定，干！
苦逼哈哈的...
扫一扫，微信中打开
