offset()
作用是获取目标的top和left的坐标值,通过$(div).offset().top以及$(div).offset().left可以获得这两个值。
blind()
作用是将某个方法和某个事件结合起来,比如在点击一个图片的同时拖动鼠标,可以改变这个图片的某个属性,那么就可以在$img.mousedown方法中添加一行代码$(this).blind("mousemove",myfunction),其中传入的第一个参数是事件名称,第二个参数是我们自定义的方法
那么问题来了
这有什么用呢???
通过上述的两个方法可以实现对某个框体或者图片的拖拽。具体效果如下图
这个效果用途我觉得还是挺广的,比如说制作网页游戏、制作类似QQ空间的展示网页、拖动选项至收藏栏等等
话不多说,代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.1.1.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.movediv {
line-height: 30px;
background: blue;
width: 120px;
text-align: center;
border: 1px solid black;
float: left;
margin: 10px;
}
</style>
<script type="text/javascript">
$(function() {
//创建一个接收拖拽目标top坐标的变量
var divtop;
//创建一个接收拖拽目标left坐标的变量
var divleft;
//创建一个接收鼠标top坐标的变量
var mousetop;
//创建一个接收鼠标left坐标的变量
var mouseleft;
//创建一个在拖拽目标上按下鼠标的事件
$(".movediv").mousedown(function(e) {
//获得按下鼠标时拖拽目标以及鼠标的top和left坐标
divtop = $(this).offset().top;
divleft = $(this).offset().left;
mousetop = e.pageY;
mouseleft = e.pageX;
//创建一个移动拖拽目标的连接,使目标在移动的过程中不断调用自定义的movediv方法
$(this).bind('mousemove', movediv);
})
//创建一个动态获取鼠标和拖拽目标当前坐标的方法
function movediv(event) {
var newdivtop = divtop + (event.pageY - mousetop);
var newdivleft = divleft + (event.pageX - mouseleft);
//将获取到的坐标添加到拖拽目标中,使得拖拽目标不断跟随鼠标移动
$(this).css({
'top' : newdivtop + 'px',
'left' : newdivleft + 'px',
'position' : 'absolute'
})
}
//创建一个松开鼠标的方法,并且在鼠标松开时断开blind连接
$(".movediv").mouseup(function() {
$(this).unbind("mousemove");
})
})
</script>
</head>
<body>
<div class="movediv">
拖啊拖啊拖
</div>
<div class="movediv">
我再拖啊拖啊拖
</div>
</body>
</html>