原生js拖动效果
- 我用的是
ES6的语法,不了解的同学可以先了解下ES6的语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js 拖动效果</title>
<style>
#drag {
100px;
height: 100px;
background: #000;
position: absolute;
}
</style>
</head>
<body>
<div id="drag"></div>
<script>
window.onload = () => {
let obj = document.getElementById('drag');
let offsetX,offsetY;
obj.onmousedown = e => {
offsetX = e.clientX - obj.offsetLeft;
offsetY = e.clientY - obj.offsetTop;
window.onmousemove = e => {
obj.style.left = e.clientX - offsetX + 'px';
obj.style.top = e.clientY - offsetY + 'px';
};
};
obj.onmouseup = e => {
window.onmousemove = null;
}
};
</script>
</body>
</html>
jquery 拖动效果
- 我这里使用的版本是
jquery-1.12.4不同的版本可能需要调整
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>jquery</title>
<style>
div {
100px;
line-height: 100px;
background: #000;
color: skyblue;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div>点住进行拖拽</div>
<!-- javascript -->
<script src="jquery-1.12.4.min.js"></script>
<script>
$(function(){
function drag(obj) {
obj.on("mousedown", start);
function start(e) {
var event = e || window.event;
deltaX = event.clientX - obj.offset().left;
deltaY = event.clientY - obj.offset().top;
// 鼠标坐标减去div离浏览器左上角的坐标
$(document).on("mousemove", move);
$(document).on("mouseup", stop);
// 当鼠标移动的时候绑定mousemove事件
// 当鼠标放开的时候绑定一个stop函数
}
function move(e) {
var event = e || window.event;
obj.css({
"left": (event.clientX - deltaX) + "px",
"top": (event.clientY - deltaY) + "px"
});
//只要鼠标移动就触发move函数 设置div坐标
// 鼠标的坐标减去div离浏览器左上角的坐标就是div自己的目标
return false;
}
function stop() {
// 当鼠标放开时解除document绑定的事件
$(document).off("mousemove", move);
$(document).off("mouseup", stop);
// $(document).off(); 解除所有绑定过的事件,这样也行
}
}
drag( $('div') );
});
</script>
</body>
</html>