拖拽原理很简单，分位三部，鼠标按下时，鼠标移动时，鼠标放开时，下面是一个简单的例子：
鼠标按下时，获取元素初始位置，鼠标初始位置，鼠标移动时改变元素当前位置为：元素初始位置+鼠标当前位置与初始位置只差。鼠标放开时做些小处理。。。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.js"></script>
<style>
html,body{}
.pop{
position: absolute;
width: 100px;
height: 100px;
background-color: green;
left: 10px;
top:50%;
transform: translateY(-50%);
cursor: pointer;
z-index: 10;
}
.container{
height: 800px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="container"></div>
<div class="pop"></div>
<script>
let ifMouseDown = false;
let initPosition = {left:0,top:0}; // 元素初始位置
let initMousePosition = {left:0,top:0}; // 鼠标按下位置
let curMousePosition = {left:0,top:0}; // 鼠标当前位置
let targetEle = null;
$(document).on('mousedown','.pop',function (e) {
targetEle = e.target;
ifMouseDown = true;
initMousePosition.left = e.clientX;
initMousePosition.top = e.clientY;
initPosition.left = parseFloat($(targetEle).css('left'));
initPosition.top = parseFloat($(targetEle).css('top'));
$('body').attr('onselectstart','return false');
});
$(document).on('mousemove',function (e) {
if(ifMouseDown){
curMousePosition.left = e.clientX;
curMousePosition.top = e.clientY;
$(targetEle).css({
left:initPosition.left + curMousePosition.left - initMousePosition.left + 'px',
top:initPosition.top + curMousePosition.top - initMousePosition.top + 'px'
})
}
});
$(document).on('mouseup',function () {
ifMouseDown = false;
$('body').attr('onselectstart','return true');
})
</script>
</body>
</html>
17万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
