鼠标拖动改变DIV等网页元素的大小的实现方法

2019-08-10 01:30 来源：未知

本文实例为大家分享了jquery拖动改变div大小的具体代码，供大家参考，具体内容如下

1.初次实现

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>jQuery 版“元素拖拽改变大小”原型 </title> 
<script type="text/javascript" src="../js/jquery-1.7.1.js"></script> 
<script type="text/javascript"> 
  /* 
   * jQuery.Resize by wuxinxi007 
   * Date: 2011-5-14 
   * blog : http://wuxinxi007.cnblogs.com/ 
   */ 
  $(function(){ 
    //绑定需要拖拽改变大小的元素对象 
    bindResize(document.getElementById('test')); 
  }); 

  function bindResize(el){ 
    //初始化参数 
    var els = el.style, 
      //鼠标的 X 和 Y 轴坐标 
      x = y = 0; 
    //邪恶的食指 
    $(el).mousedown(function(e){ 
      //按下元素后，计算当前鼠标与对象计算后的坐标 
      x = e.clientX - el.offsetWidth, 
      y = e.clientY - el.offsetHeight; 
      //在支持 setCapture 做些东东 
      el.setCapture ? ( 
        //捕捉焦点 
        el.setCapture(), 
        //设置事件 
        el.onmousemove = function(ev){ 
          mouseMove(ev || event) 
        }, 
        el.onmouseup = mouseUp 
      ) : ( 
        //绑定事件 
        $(document).bind("mousemove",mouseMove).bind("mouseup",mouseUp) 
      ) 
      //防止默认事件发生 
      e.preventDefault() 
    }); 
    //移动事件 
    function mouseMove(e){ 
      //宇宙超级无敌运算中... 
      els.width = e.clientX - x   'px', 
      els.height = e.clientY - y   'px' 
    } 
    //停止事件 
    function mouseUp(){ 
      //在支持 releaseCapture 做些东东 
      el.releaseCapture ? ( 
        //释放焦点 
        el.releaseCapture(), 
        //移除事件 
        el.onmousemove = el.onmouseup = null 
      ) : ( 
        //卸载事件 
        $(document).unbind("mousemove", mouseMove).unbind("mouseup", mouseUp) 
      ) 
    } 
  } 
</script> 
<style type="text/css"> 
#test{ 
  position:absolute; 
  top:0;left:0; 
  width:200px; 
  height:100px; 
  background:#f1f1f1; 
  text-align:center; 
  line-height:100px; 
  border:1px solid #CCC; 
  cursor:move; 
} 
</style> 
</head> 

<body> 
  <div id="test">dgdg</div> 
</body> 
</html>

1.1 html代码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>div change width by drag</title>
    <script src="../jQuery/jquery-1.8.3.min.js" type="text/javascript"></script>
  </head>

  <body>
    <h1>div change width by drag</h1>
    <div id="pos" style="color:red"></div>

    <div id="myDiv" style="border:2px solid red;width:300px;height:50px;margin-left: 100px;margin-top: 20px"></div>
  </body>
</html>

您可能感兴趣的文章:

1.2 js代码

var eleLeft = $('#myDiv').offset().left;
        var isMouseDown = false;
        var borderLen = 4; //左右边框

        $('#myDiv').bind({
          mousedown:function(e){
            var ele = $(this);
            var rightPos = eleLeft   ele.width()   borderLen;
            if(rightPos-5 <= e.pageX && e.pageX <= rightPos){
              isMouseDown = true;

            }
          },

          mousemove:function(e){
            var ele = $(this);
            var rightPos = eleLeft   ele.width()   borderLen;
            $('#pos').text("x:" e.pageX   " eleLeft:" eleLeft " rightPos:" rightPos);

            if(rightPos-5 <= e.pageX && e.pageX <= rightPos){
              ele.css('cursor','e-resize');
            }else{
              if(!isMouseDown){
                ele.css('cursor','auto');
              }
            }
            if(isMouseDown){
              ele.width((e.pageX-eleLeft-borderLen) 'px'); //新鼠标位置-div距左-borderLen
            }
          },
          mouseup:function(e){
            isMouseDown = false;
          }
        });

1.3 结果

只能往左拖动使div宽度变小，往右拖动没有用！原因往右拖动鼠标mousemove事件无法被div捕获了。拖动时也很难停下来！所以得改进。

2.再次改进

$('#myDiv').bind({
          mousedown:function(e){
            var ele = $(this);
            var rightPos = eleLeft   ele.width()   borderLen;
            if(rightPos-5 <= e.pageX && e.pageX <= rightPos){
              isMouseDown = true;
            }
          }
        });

        $('body').bind({
          mousemove:function(e){
            var ele = $('#myDiv');
            var rightPos = eleLeft   ele.width()   borderLen;
            $('#pos').text("x:" e.pageX   " eleLeft:" eleLeft " rightPos:" rightPos);

            if(rightPos-5 <= e.pageX && e.pageX <= rightPos){
              ele.css('cursor','e-resize');
            }else{
              if(!isMouseDown){
                ele.css('cursor','auto');
              }
            }
            if(isMouseDown){
              ele.width((e.pageX-eleLeft-borderLen) 'px'); 
            }
          },
          mouseup:function(e){
            isMouseDown = false;
          }
        });

这次解决了上述问题，可以往右拖，并且随时可以停下来了。到这里就完成了吗？NO!

TAG标签：

热点新闻

热搜榜