JS实现鼠标拖动调整DIV尺寸大小

浏览：1074次- 评论：0次- 发布时间：2023-08-26

Html

Css

* {
	margin:0;
	padding:0;
}
#box {
	width:600px;
	height:600px;
	border:1px solid #333;
	overflow:hidden;
}
#zhezhao {
	width:100%;
	height:100%;
	background:#f00;
	filter:alpha(opacity:0);
	opacity:0;
	z-index:9999;
	position:absolute;
	top:0;
	left:0;
	display:none;
}
#div2 {
	width:200px;
	height:200px;
	position:relative;
	background:#EEEEEE;
	border:1px solid #f00;
}
#div1 {
	width:15px;
	height:15px;
	background:#99CC00;
	position:absolute;
	right:0px;
	bottom:0px;
	cursor:nw-resize;
	overflow:hidden;
	font-size:12px;
	text-align:center;
	line-height:15px;
	color:#FFFFFF;
	float:right;
	z-index:3;
}
#right {
	width:15px;
	height:100%;
	background:#f00;
	float:right;
	position:absolute;
	right:0;
	top:0;
	cursor:e-resize;
	overflow:hidden;
	filter:alpha(opacity:0);
	opacity:0;
	z-index:1;
}
#bottom {
	width:100%;
	height:15px;
	background:#f00;
	position:absolute;
	left:0;
	bottom:0;
	cursor:n-resize;
	overflow:hidden;
	filter:alpha(opacity:0);
	opacity:0;
	z-index:1;
}
#div2 p {
	padding:10px;
	line-height:24px;
	font-size:13px;
	text-indent:24px;
	color:#996600;
}
#div2 h2 {
	width:100%;
	height:25px;
	line-height:25px;
	font-size:14px;
	background:#CC9900;
	color:#FFFFFF;
	text-indent:15px;
	cursor:move;
	overflow:hidden;
}

function doDrag1(ev) {
        var oEvent = ev || event;
        var l = oEvent.clientX - mouseStart.x + rightStart.x;
        var w = l + oDiv.offsetWidth;

if (w < oDiv.offsetWidth) {
            w = oDiv.offsetWidth;
        } else if (w > obox.clientWidth - oDiv2.offsetLeft) {
            w = obox.clientWidth - oDiv2.offsetLeft - 2;
        }
        oDiv2.style.width = w + "px";
    };

function doDrag2(ev) {
        var oEvent = ev || event;
        var t = oEvent.clientY - mouseStart.y + bottomStart.y;
        var h = t + oDiv.offsetHeight;

if (h < oDiv.offsetHeight) {
            h = oDiv.offsetHeight;
        } else if (h > obox.clientHeight - oDiv2.offsetTop) {
            h = obox.clientHeight - oDiv2.offsetTop - 2;
        }
        oDiv2.style.height = h + "px";
    };

function doDrag(ev) {
        var oEvent = ev || event;
        var l = oEvent.clientX - mouseStart.x + divStart.x;
        var t = oEvent.clientY - mouseStart.y + divStart.y;

var w = l + oDiv.offsetWidth;
        var h = t + oDiv.offsetHeight;

if (w < oDiv.offsetWidth) {
            w = oDiv.offsetWidth;
        } else if (w > obox.clientWidth - oDiv2.offsetLeft) {
            w = obox.clientWidth - oDiv2.offsetLeft - 2;
        }
        if (h < oDiv.offsetHeight) {
            h = oDiv.offsetHeight;
        } else if (h > obox.clientHeight - oDiv2.offsetTop) {
            h = obox.clientHeight - oDiv2.offsetTop - 2;
        }

oDiv2.style.width = w + "px";
        oDiv2.style.height = h + "px";
    };

//h2完美拖拽
    h2.onmousedown = function(ev) {
        var oEvent = ev || event;
        mouseStart.x = oEvent.clientX;
        mouseStart.y = oEvent.clientY;
        divStart.x = oDiv2.offsetLeft;
        divStart.y = oDiv2.offsetTop;

if (h2.setCapture) {
            h2.onmousemove = doDrag3;
            h2.onmouseup = stopDrag3;
            h2.setCapture();
        } else {
            document.addEventListener("mousemove", doDrag3, true);
            document.addEventListener("mouseup", stopDrag3, true);
        }
        zhezhao.style.display = 'block';
    };

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.11.3

立即下载收藏

积分说明：注册即送10牛币，每日签到可获得5牛币，成为VIP会员可永久免牛币下载！充值积分充值会员更多说明»

代码描述：js鼠标拖动调整div大小代码

讨论这个常用代码（0）回答他人问题或分享心得会奖励牛币

〒_〒居然一个评论都没有……

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取