溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章為大家展示了利用JavaScript怎么實現一個拖拽鼠標調整div大小的功能，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。
Java的特點有哪些 1.Java語言作為靜態面向對象編程語言的代表，實現了面向對象理論，允許程序員以優雅的思維方式進行復雜的編程。 2.Java具有簡單性、面向對象、分布式、安全性、平臺獨立與可移植性、動態性等特點。 3.使用Java可以編寫桌面應用程序、Web應用程序、分布式系統和嵌入式系統應用程序等。
實現思路：
根據鼠標位置改變鼠標樣式
當鼠標在div的邊緣和四個角時顯示不同的樣式，通過cursor修改
當鼠標在div的邊緣和四個角按下時記錄具體坐標點位置， 并開始根據鼠標的移動修改div的尺寸
鼠標松開時結束尺寸修改
代碼實現：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body, html {
width: 100%;
height: 100%;
margin: 0;
}
#container {
width: 200px;
height: 200px;
padding: 15px;
border: #00cdcd 2px solid;
box-sizing: border-box;
}
.item {
cursor: default;
width: 100%;
height: 100%;
background: #757575;
}
</style>
</head>
<body id="body">
<div id="container">
<div class="item"></div>
</div>
<script>
//需要調整尺寸的div
let c = document.getElementById('container')
// body監聽移動事件
document.getElementById('body').addEventListener('mousemove', move)
// 鼠標按下事件
c.addEventListener('mousedown', down)
// 鼠標松開事件
document.getElementById('body').addEventListener('mouseup', up)
// 是否開啟尺寸修改
let resizeable = false
// 鼠標按下時的坐標，并在修改尺寸時保存上一個鼠標的位置
let clientX, clientY
// div可修改的最小寬高
let minW = 8, minH = 8
// 鼠標按下時的位置，使用n、s、w、e表示
let direc = ''
// 鼠標松開時結束尺寸修改
function up() {
resizeable = false
}
// 鼠標按下時開啟尺寸修改
function down(e) {
let d = getDirection(e)
// 當位置為四個邊和四個角時才開啟尺寸修改
if (d !== '') {
resizeable = true
direc = d
clientX = e.clientX
clientY = e.clientY
}
}
// 鼠標移動事件
function move(e) {
let d = getDirection(e)
let cursor
if (d === '') cursor = 'default';
else cursor = d + '-resize';
// 修改鼠標顯示效果
c.style.cursor = cursor;
// 當開啟尺寸修改時，鼠標移動會修改div尺寸
if (resizeable) {
// 鼠標按下的位置在右邊，修改寬度
if (direc.indexOf('e') !== -1) {
c.style.width = Math.max(minW, c.offsetWidth + (e.clientX - clientX)) + 'px'
clientX = e.clientX
}
// 鼠標按下的位置在上部，修改高度
if (direc.indexOf('n') !== -1) {
c.style.height = Math.max(minH, c.offsetHeight + (clientY - e.clientY)) + 'px'
clientY = e.clientY
}
// 鼠標按下的位置在底部，修改高度
if (direc.indexOf('s') !== -1) {
c.style.height = Math.max(minH, c.offsetHeight + (e.clientY - clientY)) + 'px'
clientY = e.clientY
}
// 鼠標按下的位置在左邊，修改寬度
if (direc.indexOf('w') !== -1) {
c.style.width = Math.max(minW, c.offsetWidth + (clientX - e.clientX)) + 'px'
clientX = e.clientX
}
}
}
// 獲取鼠標所在div的位置
function getDirection(ev) {
let xP, yP, offset, dir;
dir = '';
xP = ev.offsetX;
yP = ev.offsetY;
offset = 10;
if (yP < offset) dir += 'n';
else if (yP > c.offsetHeight - offset) dir += 's';
if (xP < offset) dir += 'w';
else if (xP > c.offsetWidth - offset) dir += 'e';
return dir;
}
</script>
</body>
</html>上述內容就是利用JavaScript怎么實現一個拖拽鼠標調整div大小的功能，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
