最近在做一个流程图的时候,需要用到拖拽功能,在这里做个记录吧。
在做这个拖拽功能时我首先想到的是能不能用监听鼠标的按下、拖动、放开事件来实现,但是实际的效果不是特别的好,最终还是选择使用浏览器原生的拖动属性和事件来实现。
下面是一个简单的示例代码,把它复制在你的本地并运行感受一下效果吧。
<!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>
.drag{
width: 100%;
height: 50px;
background-color: #bfbfbf;
display: flex;
justify-content: center;
align-items: center;
}
.btn{
width: 50px;
height: 30px;
background-color: green;
border:1px solid #fff;
border-radius: 3px;
text-align: center;
line-height: 30px;
color:#fff;
}
.btn:hover{
cursor: pointer;
}
.put{
width: 100%;
height: 300px;
border:1px solid #bfbfbf;
position: absolute;
}
</style>
</head>
<body>
<div class="drag" draggable>
<div class="btn">测试</div>
</div>
<hr/>
<div class="put"></div>
<script>
let drag = document.querySelector('.drag')
let btn = document.querySelector('.btn')
let put = document.querySelector('.put')
//开始拖动,浏览器原生拖动draggable属性,默认是auto,如果没有设置表示默认使用浏览器的默认行为(具体属性介绍参考MDN文档内容)
drag.addEventListener('dragstart',function(e){
console.log('dragstart',e);
e.dataTransfer.effectAllowed = 'move' //在开始拖动时将鼠标变为拖动的样式,不然的话默认是none的样式,(具体使用情况还请查阅MDN文档介绍)
})
//在需要拖入的标签哪里通过监听拖动中事件阻止一下原生事件
put.addEventListener('dragover',function(e){
console.log('dragover',e);
e.preventDefault() //阻止一下原生事件
})
put.addEventListener('drop',function(e){
console.log('drop',e);
btn.style.position = 'absolute'
btn.style.left = e.offsetX + 'px'
btn.style.top = e.offsetY + 'px'
put.appendChild(btn)
})
</script>
</body>
</html>