html 随鼠标拖动调整高度

原生和js代码实现div元素随鼠标拖动调整高度，至于高度的可以也可以参考这个修改。（代码中引入jquery是为取元素方便，这个方法完全可以改为jquery，只需要改一时间绑定的方式即可。）
主要利用通过html 5自带拖拽事件来实现的，直接上代码，逻辑不太复杂：

<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <title>随鼠标拖动调整高度</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <style type="text/css">
    #dragDivContainer { 
        width:100%; 
        height:160px; 
        border: 1px black solid;
    }

    #adjustDiv{
        bottom: 0;
        width:100%; 
        height:100px;
        border: 1px red solid;
    } 

    #dragDiv{
        bottom: 0;
        width:100%; 
        height:6px; 
        background-color:#999;
        cursor:n-resize;
    } 
    </style>    
  </head>
  <body> 
    <div id="dragDivContainer" ondrop="dropHandle(event)" ondragover="dragoverHandle(event)">
        容器div，要比我们想实现拖拽效果的div要高一点
        <div class="form-control" id="adjustDiv" >
            要进行高度调整的div：
        </div>
        <div draggable="true" id="dragDiv" ondragstart="dragstartHandle(event)"></div>        
    </div>
  </body>  
  <script>
    var src_posi_Y = 0;    
    var dragDiv = 6;
    var minHeight = 100;
    function dragstartHandle(e) {
        src_posi_Y = e.pageY;// 取起始位置        
        e.dataTransfer.setData("targetId", e.target.id);// 要有这句，可能无用，但没有firefox下ondragover会触发不了，至于原因不没有找到，如知道可告知。（chrome下会不会这样没试）
        console.log("start Y ：" + e.pageY);
    }

    function dragoverHandle(e) {
        var dest_posi_Y = e.pageY;// 当前位置
        console.log("dragover Y:" + e.pageY);
        var move_dist = dest_posi_Y - src_posi_Y;
        console.log("dragover move_dist:" + move_dist);

        var afterAdjHeight = $("#adjustDiv").height() + move_dist;
        console.log("dragover afterAdjHeight:" + afterAdjHeight);
        afterAdjHeight = afterAdjHeight > minHeight ? afterAdjHeight : minHeight;
        var containerHeight = $("#dragDivContainer").height() - $("#adjustDiv").height() + afterAdjHeight;
        $("#dragDivContainer").css("height", containerHeight);
        $("#adjustDiv").css("height", afterAdjHeight);

        src_posi_Y = dest_posi_Y;
        e.preventDefault();
    }

    function dropHandle(e) {
        console.log("drop  Y:" + e.pageY);
        src_posi_Y = 0
        e.preventDefault();
        e.stopPropagation();
    }
</script>
</html>

html 随鼠标拖动调整高度

猜你喜欢