jquery的扩展学习之offset()以及blind()的用法-CSDN博客

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");
    })