一、实现效果
二、实现代码
主要通过原生的 mousedown
和 mouseup
以及mouseleave
事件实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport"
content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, width=device-width" />
<title>拖动效果</title>
<!-- 引入element样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入element组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- 引入vue -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
<style type="text/css">
#call_state_marked{
position: fixed;
top: 50px;
left: 100px;
z-index: 9;
color: #f00;
background: #fff;
font-size: 16px;
width: 60px;
height: 60px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
box-shadow: -3px 0px 6px 0px #a9a9a980, 3px 0px 6px 0px #a9a9a980;
border-radius: 4px;
}
#call_state_marked span:nth-child(1) {
font-size: 20px;
font-weight: 600;
}
</style>
</head>
<body>
<div id="content">
<div id="call_state_marked" @mousedown="handleMouseDown" @mouseup="handleMouseUp">
<span class="el-icon-phone"></span>
<span>挂断</span>
</div>
</div>
<script>
var vue = new Vue({
el: '#content',
data: {
},
mounted() {
// 监听页面的mouseleave事件,当鼠标移出浏览器页面可用区域 并 松开按键时,停止拖动
document.addEventListener("mouseleave", (e) => {
document.onmousemove = document.onmouseup = null;
});
},
methods: {
// 拖动效果
handleMouseDown(e) {
let box = document.getElementById('call_state_marked');
// e.pageX, e.pageY 是鼠标在页面上的坐标
// box.offsetLeft, box.offsetTop 是元素相对于页面左上角的偏移位置
// disx, disy 便是鼠标相对于元素左上角的偏移位置
let disx = e.pageX - box.offsetLeft;
let disy = e.pageY - box.offsetTop;
// document.documentElement.clientWidth: 浏览器页面可用宽度
// document.documentElement.clientHeight: 浏览器页面可用高度
document.onmousemove = function (e) { // 鼠标移动的时候计算元素的位置
let x, y;
// e.pageX - disx 鼠标在页面上的位置 - 鼠标在元素中的偏移位置 得到的是元素相对于页面左上角的偏移位置
if ((e.pageX - disx) > 0) { // 元素相对于页面左上角的偏移位置 大于0时
if ((e.pageX - disx) > document.documentElement.clientWidth - 60) { // 元素相对于页面左上角的偏移位置 移出到页面以外(右侧)
x = document.documentElement.clientWidth - 60; // 60是元素自身的宽高
} else {
x = e.pageX - disx;
}
} else { // 元素移到到页面以外(左侧)
x = 0;
}
if ((e.pageY - disy) > 0) {
if ((e.pageY - disy) > document.documentElement.clientHeight - 60) { // 元素移动到页面以外(底部)
y = document.documentElement.clientHeight - 60;
} else {
y = e.pageY - disy;
}
} else { // 元素移动到页面以外(顶部)
y = 0;
}
box.style.left = x + 'px';
box.style.top = y + 'px';
}
},
// 释放鼠标按钮,将事件清空,否则始终会跟着鼠标移动
handleMouseUp() {
document.onmousemove = document.onmouseup = null;
},
},
});
</script>
</body>
</html>
文章仅为本人学习过程的一个记录,仅供参考,如有问题,欢迎指出!