溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹如何實(shí)現(xiàn)鼠標(biāo)拖動(dòng)改變DIV等網(wǎng)頁元素的大小，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！
1.初次實(shí)現(xiàn)
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> <h2>div change width by drag</h2> <div id="pos" ></div> <div id="myDiv" ></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'); //新鼠標(biāo)位置-div距左-borderLen
}
},
mouseup:function(e){
isMouseDown = false;
}
});1.3 結(jié)果
只能往左拖動(dòng)使div寬度變小，往右拖動(dòng)沒有用！原因往右拖動(dòng)鼠標(biāo)mousemove事件無法被div捕獲了。拖動(dòng)時(shí)也很難停下來！所以得改進(jìn)。
2.再次改進(jìn)
$('#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;
}
});這次解決了上述問題，可以往右拖，并且隨時(shí)可以停下來了。到這里就完成了嗎？NO!
當(dāng)我引入一個(gè)其他div，并且阻止mouseup事件冒泡情況怎么樣呢？答案是，拖動(dòng)到這個(gè)其它div上放開鼠標(biāo)后無法停止下來！
<div id="otherDiv" ></div>
$('#otherDiv').mouseup(function(e){
//e.preventDefault(); //阻止默認(rèn)行為
e.stopPropagation(); //阻止事件冒泡(導(dǎo)致body捕獲不到mouseup事件)
});3.完美解決
拖動(dòng)停止可能受到其它元素的干擾，怎么解決？想到一些彈出層點(diǎn)擊其它其它地方隱藏的功能，讓我想到了，加一個(gè)遮罩層，讓mouseup事件總是可以響應(yīng)，不就搞定了嘛！
$('#myDiv').bind({
mousedown:function(e){
var ele = $(this);
var rightPos = eleLeft + ele.width() + borderLen;
if(rightPos-5 <= e.pageX && e.pageX <= rightPos){
isMouseDown = true;
//創(chuàng)建遮罩層，防止mouseup事件被其它元素阻止冒泡，導(dǎo)致mouseup事件無法被body捕獲，導(dǎo)致拖動(dòng)不能停止
var bodyWidth = $('body').width();
var bodyHeight = $('body').height();
$('body').append('<div id="mask" ></div>');
}
}
});
$('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;
$('#mask').remove();
}
});
$('#otherDiv').mouseup(function(e){
//e.preventDefault(); //阻止默認(rèn)行為
e.stopPropagation(); //阻止事件冒泡(導(dǎo)致body捕獲不到mouseup事件)
});4.完整代碼和最終效果
<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>
<h2>div change width by drag</h2>
<div id="pos" ></div>
<div id="myDiv" ></div>
<div id="otherDiv" ></div>
</body>
<script type="text/javascript">
$(document).ready(function(){
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;
//創(chuàng)建遮罩層，防止mouseup事件被其它元素阻止冒泡，導(dǎo)致mouseup事件無法被body捕獲，導(dǎo)致拖動(dòng)不能停止
var bodyWidth = $('body').width();
var bodyHeight = $('body').height();
$('body').append('<div id="mask" ></div>');
}
}
});
$('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;
$('#mask').remove();
}
});
$('#otherDiv').mouseup(function(e){
//e.preventDefault(); //阻止默認(rèn)行為
e.stopPropagation(); //阻止事件冒泡(導(dǎo)致body捕獲不到mouseup事件)
});
});
</script>
</html>
以上是“如何實(shí)現(xiàn)鼠標(biāo)拖動(dòng)改變DIV等網(wǎng)頁元素的大小”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼