jQuery 实现拖拽
2017-08-18 本文已影响0人
sky丶星如雨
前一段时间写过一个js原生方法实现拖拽，现在用jQuery再来实现以下。
其实，原理都是一样的。
下面，我们来看代码。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽</title>
<style>
* {
padding: 0;
margin: 0;
}
div {
width: 100px;
height: 100px;
background: #f00;
cursor: pointer;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div></div>
<script src="jquery.min.js"></script>
<script>
$(function () {
// 鼠标按下时
$('div').mousedown(function (e) {
// 获取当前元素的 偏移量
var positionDiv = $(this).offset();
// 获取是否在当前事件下在当前元素上
var distenceX = e.pageX - positionDiv.left;
var distenceY = e.pageY - positionDiv.top;
// 移动时
$(document).mousemove(function (e) {
// 获取
var x = e.pageX - distenceX;
var y = e.pageY - distenceY;
if (x < 0) {
x = 0;
} else if (x > $(document).width() - $('div').outerWidth(true)) { // 判断是否超出浏览器宽度
x = $(document).width() - $('div').outerWidth(true);
}
if (y < 0) {
y = 0;
} else if (y > $(document).height() - $('div').outerHeight(true)) { // 判断是否超出浏览器高度
y = $(document).height() - $('div').outerHeight(true);
}
// 设置left值和top值
$('div').css({
'left': x + 'px',
'top': y + 'px'
});
});
// 解绑事件
$(document).mouseup(function () {
$(document).off('mousemove');
});
});
});
</script>
</body>
</html>
