jQuery实现拖动改变div大小功能

通过jQuery实现用户自定义div尺寸功能

主要用到几个鼠标事件：

1.mousedown（）方法

当鼠标指针移动到元素上方，并按下鼠标左键时，会发生 mousedown 事件。mousedown() 方法触发 mousedown 事件，或添加当发生 mousedown 事件时运行的函数。

2.mousemove（）方法

当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。用户把鼠标移动一个像素，就会发生一次 mousemove 事件。处理所有 mousemove 事件会耗费系统资源。请谨慎使用该事件。

3.mouseup（）方法

当鼠标指针移动到元素上方，并松开鼠标左键时，会发生 mouseup 事件。

4.mouseleave（）方法

当鼠标指针离开被选元素时，会发生 mouseleave 事件。与 mouseout 事件不同，mouseleave 事件只有在鼠标指针离开被选元素时被触发，mouseout 事件在鼠标指针离开任意子元素时也会被触发。

下面是一个小实例

HTML布局部分

<div id="bodyer">
      <div id="param-div">
        <div id="drag-Content"><br />拖动各角查看效果</div>
        <div id="topOrLeft" class="_drag drag_top_left"></div>
        <div id="topOrCenter" class="_drag drag_top_center"></div>
        <div id="topOrRight" class="_drag drag_top_right"></div>
        <div id="centerOrLeft" class="_drag drag_center_left"></div>
        <div id="centerOrRight" class="_drag drag_center_right"></div>
        <div id="bottomOrLeft" class="_drag drag_bottom_left"></div>
        <div id="bottomOrCenter" class="_drag drag_bottom_center"></div>
        <div id="bottomOrRight" class="_drag drag_bottom_right"></div>
      </div>
    </div>

样式部分

<style>
      #param-div {
        width: 300px;
        height: 400px;
        border: 1px solid #ccc;
        position: absolute;
        left: 300px;
        top: 300px;
      }
      #drag-Content {
        background: #768cf0;
        width: 100%;
        height: 100%;
        position: absolute;
        font-size: 20px;
        font-weight: bold;
        color: #fff;
        text-shadow: 2px 2px 5px #ff0000;
        text-align: center;
      }
      ._drag {
        border-radius: 15px;
        width: 15px;
        height: 15px;
        background: #fff;
        position: absolute;
        border: 1px solid #4240eb;
      }
      .drag_top_left {
        left: calc(0px - (15px) / 2);
        top: calc(-15px / 2);
        cursor: nw-resize;
      }
      .drag_top_center {
        left: calc(50% - (15px) / 2);
        top: calc(-15px / 2);
        cursor: n-resize;
      }
      .drag_top_right {
        right: calc(-15px / 2);
        top: calc(-15px / 2);
        cursor: ne-resize;
      }
      .drag_center_left {
        left: calc(-15px / 2);
        top: calc(50% - 15px / 2);
        cursor: w-resize;
      }
      .drag_center_right {
        right: calc(-15px / 2);
        top: calc(50% - 15px / 2);
        cursor: e-resize;
      }
      .drag_bottom_left {
        left: calc(0px - (15px) / 2);
        bottom: calc(0px - 15px / 2);
        cursor: sw-resize;
      }
      .drag_bottom_center {
        left: calc(50% - (15px) / 2);
        bottom: calc(0px - 15px / 2);
        cursor: s-resize;
      }
      .drag_bottom_right {
        right: calc(-15px / 2);
        bottom: calc(0px - 15px / 2);
        cursor: se-resize;
      }
    </style>

jquery部分

<script>
      window.onload = function() {
        var isMouseDown = false; //鼠标是否按下
        var mouseDownPositionY;
        var mouseDownPositionX;
        var InitPositionY;
        var InitPositionX;
        var InitHeight;
        var InitWidth;
        var mouseDownDivId; //按下的元素
        $('._drag').mousedown(function(event) {
          //鼠标按下
          mouseDownPositionY = event.pageY;
          mouseDownPositionX = event.pageX;
          isMouseDown = true;
          mouseDownDivId = $(this).attr('id');
          InitPositionY = $('#param-div')
            .css('top')
            .replace('px', '');
          InitPositionX = $('#param-div')
            .css('left')
            .replace('px', '');
          InitHeight = $('#param-div').height();
          InitWidth = $('#param-div').width();
        });
        $(document)
          .mousemove(function(event) {
            if (isMouseDown) {
              var hh = parseInt(event.pageY) - parseInt(mouseDownPositionY);
              var ww = parseInt(event.pageX) - parseInt(mouseDownPositionX);
              var tempY = hh + parseInt(InitPositionY);
              var tempX = ww + parseInt(InitPositionX);
              switch (mouseDownDivId) {
                case 'topOrLeft':
                  $('#param-div').css({
                    top: tempY + 'px',
                    height: parseInt(InitHeight) - hh + 'px',
                    left: tempX + 'px',
                    width: parseInt(InitWidth) - ww + 'px'
                  });
                  break;
                case 'topOrCenter':
                  $('#param-div').css({
                    top: tempY + 'px',
                    height: parseInt(InitHeight) - hh + 'px'
                  });
                  break;
                case 'topOrRight':
                  $('#param-div').css({
                    top: tempY + 'px',
                    height: parseInt(InitHeight) - hh + 'px',
                    width: parseInt(InitWidth) + ww + 'px'
                  });
                  break;
                case 'centerOrLeft':
                  $('#param-div').css({
                    left: tempX + 'px',
                    width: parseInt(InitWidth) - ww + 'px'
                  });
                  break;
                case 'centerOrRight':
                  $('#param-div').css({
                    width: parseInt(InitWidth) + ww + 'px'
                  });
                  break;
                case 'bottomOrLeft':
                  $('#param-div').css({
                    height: parseInt(InitHeight) + hh + 'px',
                    left: tempX + 'px',
                    width: parseInt(InitWidth) - ww + 'px'
                  });
                  break;
                case 'bottomOrCenter':
                  $('#param-div').css(
                    'height',
                    parseInt(InitHeight) + hh + 'px'
                  );
                  break;
                case 'bottomOrRight':
                  $('#param-div').css({
                    height: parseInt(InitHeight) + hh + 'px',
                    width: parseInt(InitWidth) + ww + 'px'
                  });
                  break;
              }
            }
          })
          .mouseup(function() {
            mouseDownDivId = '';
            isMouseDown = false;
          })
          .mouseleave(function() {
            mouseDownDivId = '';
            isMouseDown = false;
          });
      };
    </script>

可以在我的资源中获取上述功能的完整代码，名为“jQuery实现自定义交互界面”