jQuery-拖动层(在可视区域范围内) - 手册网

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

十度

HTML代码

复制格式化注释注释清空

放大

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

(function($){
  $.fn.extend({
    mydrag:function(){
      var boxX = 0;
      //元素在页面中的横坐标
      var boxY = 0;
      //元素在页面中的纵坐标
      var dMouseX = 0;
      //按下鼠标时的鼠标所在位置的横坐标
      var dMouseY = 0;
      //按下鼠标时的鼠标所在位置的纵坐标
      var mMouseX = 0;
      //移动鼠标时的鼠标所在位置的横坐标
      var mMouseY = 0;
      //移动鼠标时的鼠标所在位置的纵坐标
      var moveLenX = 0;
      //存放鼠标移动的距离，横向
      var moveLenY = 0;
      //存放鼠标移动的距离，纵向
      var isMove = false;
      //是否拖动层的一个输助"开关"
      var movingX = 0;
      //移动中元素的LEFT值
      var movingY = 0;
      //移动中元素的TOP值
      //可视区域最右边的值
      var rightest = document.documentElement.clientWidth - $(".top").parent().outerWidth();
      //可视区域最右边的值
      var bottomest = document.documentElement.clientHeight - $(".top").parent().outerHeight();
      //获得移动鼠标时的鼠标所在位置的坐标
      var getMoveMouse = function(move){
        mMouseX = move.pageX;
        mMouseY = move.pageY;
      }
      //获得元素在页面中的当前的位置
      var getbox = function(m){
        boxX = $(".box").offset().left;
        boxY = $(".box").offset().top;
      }
      //获得鼠标按下时的坐标
      var getDownMouse = function(m){
        dMouseX = m.pageX;
        dMouseY = m.pageY;
      }
      //获得鼠标移动的距离值
      var getMoveLen = function(){
        moveLenX = mMouseX - dMouseX;
        moveLenY = mMouseY - dMouseY;
      }
      //鼠标UP时，关闭移动，即鼠标移动也不会让元素移动；
      $(document).mouseup(function(){
        isMove = false;
      }
                         )
      //给元素的TOP绑定事件
      $(this).
      //按下时获得元素的坐标和当前鼠标的坐档；
      mousedown(function(e){
        getbox(e);
        getDownMouse(e)
        isMove = true;
      }
               ).
      //移动时获得移动的距离，设置元素的TOP和LEFT值；
      mousemove(function(e){
        var $this = $(this);
        getMoveMouse(e);
        getMoveLen();
        if(isMove){
          //防止元素移出可视区域
          //可视区域浏览器最左边
          if(movingX<0){
            $this.css({
              "left":0}
                     );
            if(movingY<0){
              $this.css({
                "top":0}
                       );
            }
            else if(movingY > bottomest){
              $this.css({
                "top":bottomest}
                       );
            }
            else{
              $this.css({
                "top":boxY+moveLenY}
                       );
            }
          }
          //可视区域浏览器最上面
          else if(movingY<0){
            $this.css({
              "top":0}
                     );
            if(movingX>rightest){
              $this.css({
                "left":rightest}
                       );
            }
            else{
              $this.css({
                "left":boxX+moveLenX}
                       );
            }
          }
          //可视区域浏览器最右边
          else if(movingX > rightest){
            $this.css({
              "left":rightest}
                     );
            if(movingY > bottomest){
              $this.css({
                "top":bottomest}
                       );
            }
            else{
              $this.css({
                "top":boxY+moveLenY}
                       );
            }
          }
          //可视区域浏览器最下边
          else if(movingY > bottomest){
            $this.css({
              "top":bottomest}
                     );
            if(movingX<0){
              $this.css({
                "left":0}
                       );
            }
            else{
              $this.css({
                "left":boxX+moveLenX}
                       );
            }
          }
          //其它情况，即在可视区域中间
          else{
            $this.css({
              "left":boxX+moveLenX,"top":boxY+moveLenY}
                     );
          }
          movingX = boxX+moveLenX;
          movingY = boxY+moveLenY;
        }
      }
               )	
    }
  }
             )	
}
)(jQuery)
//使用
$(function(){
  $(".box").mydrag();
}
 )

运行代码

简介

请输入代码名称！

名称

jQuery-拖动层(在可视区域范围内)

分类

表格图层

描述

主要思路：　　1.鼠标移动多少距离，元素就同时移动多少距离，所以要获取到鼠标移动的距离；　　2.鼠标按下，并且移动，才拖动层。所以需要一个“开关”，在移动按下时打开，如果鼠标这里移动了，那么就移动层，如果这个“关闭”，那么鼠标移动时，层也不会一起移动。　　3.获取层元素，在浏览器可视区域的最左、最边，最上、最下的值。并且在拖动层的过程中，把当前层的坐标值，去和这几个值，做比较，如果超过这些值。那么就不能再拖动这个方向，即把值设为最小或最大。

收藏