<div>拖拽是指在網頁開發中，通過鼠標操作使一個元素在頁面中移動的功能。而<div>是HTML中最常用的標簽之一，表示一個塊級元素，可以在頁面上呈現獨立的一塊內容。在網頁開發中，我們經常需要實現一個<div>元素可以被鼠標拖拽移動的功能，其中一個常用的實現方式就是將要拖拽的<div>元素放在一個包裹容器<divwrap>中。這樣，我們可以借助一些JavaScript代碼實現<div>拖拽<divwrap>的功能。接下來，我們將使用幾個代碼案例來詳細解釋和說明這個功能。
第一個案例是最簡單的拖拽功能實現。
第二個案例是添加邊界約束的拖拽功能實現。
通過以上兩個案例，我們展示了如何使用JavaScript代碼實現<div>拖拽<divwrap>的功能。通過獲取鼠標點擊位置與元素的相對位置，然后結合鼠標移動事件的監聽，不斷更新元素的位置，從而實現了拖拽的效果。通過添加邊界約束的計算邏輯，我們還可以實現拖拽元素的邊界約束功能，避免元素超出容器范圍。在實際的網頁開發中，我們可以根據具體需求，加入更多的功能，例如拖拽開始/結束事件的處理、拖拽元素的限制范圍、拖拽的邊界檢測等。
第一個案例是最簡單的拖拽功能實現。
html
<!DOCTYPE html>
<html>
<head>
<style>
.divwrap {
width: 200px;
height: 200px;
background-color: #f1f1f1;
}
<br>
.div {
width: 100px;
height: 100px;
background-color: yellow;
cursor: move;
}
</style>
</head>
<body>
<div class="divwrap">
<div class="div" id="dragElement"></div>
</div>
<br>
<script>
var dragElement = document.getElementById('dragElement');
<br>
dragElement.onmousedown = function (event) {
event.preventDefault();
<br>
var shiftX = event.clientX - dragElement.getBoundingClientRect().left;
var shiftY = event.clientY - dragElement.getBoundingClientRect().top;
<br>
document.onmousemove = function (event) {
var newLeft = event.clientX - shiftX - dragElement.parentNode.getBoundingClientRect().left;
var newTop = event.clientY - shiftY - dragElement.parentNode.getBoundingClientRect().top;
<br>
dragElement.style.left = newLeft + 'px';
dragElement.style.top = newTop + 'px';
};
<br>
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
};
};
</script>
</body>
</html>在這個案例中，我們定義了一個大小為200x200像素的<divwrap>容器，并設置其背景顏色為淺灰色。然后我們定義了一個大小為100x100像素的<div>元素，并設置其背景顏色為黃色，并且鼠標樣式為move，表示可以拖動。接下來，在JavaScript代碼中，我們獲取了要拖拽的<div>元素，并為其綁定了onmousedown事件。在事件處理程序中，我們禁止了默認的鼠標行為，然后計算了鼠標點擊位置與<div>元素在頁面中的坐標偏移量。接著，我們注冊了onmousemove事件處理程序，通過不斷計算鼠標移動的位置與偏移量，實時更新<div>元素的位置，使其跟隨鼠標移動。最后，在鼠標松開時，我們清除了onmousemove和onmouseup事件處理程序，結束了拖拽功能。第二個案例是添加邊界約束的拖拽功能實現。
html
<!DOCTYPE html>
<html>
<head>
<style>
.divwrap {
width: 500px;
height: 500px;
background-color: #f1f1f1;
border: 2px solid #ccc;
position: relative;
}
<br>
.div {
width: 100px;
height: 100px;
background-color: yellow;
cursor: move;
position: absolute;
}
</style>
</head>
<body>
<div class="divwrap">
<div class="div" id="dragElement"></div>
</div>
<br>
<script>
var dragElement = document.getElementById('dragElement');
var divwrapElement = dragElement.parentNode;
<br>
dragElement.onmousedown = function (event) {
event.preventDefault();
<br>
var shiftX = event.clientX - dragElement.getBoundingClientRect().left;
var shiftY = event.clientY - dragElement.getBoundingClientRect().top;
<br>
document.onmousemove = function (event) {
var newLeft = event.clientX - shiftX - divwrapElement.getBoundingClientRect().left;
var newTop = event.clientY - shiftY - divwrapElement.getBoundingClientRect().top;
<br>
if (newLeft < 0) {
newLeft = 0;
} else if (newLeft > divwrapElement.offsetWidth - dragElement.offsetWidth) {
newLeft = divwrapElement.offsetWidth - dragElement.offsetWidth;
}
<br>
if (newTop < 0) {
newTop = 0;
} else if (newTop > divwrapElement.offsetHeight - dragElement.offsetHeight) {
newTop = divwrapElement.offsetHeight - dragElement.offsetHeight;
}
<br>
dragElement.style.left = newLeft + 'px';
dragElement.style.top = newTop + 'px';
};
<br>
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
};
};
</script>
</body>
</html>在這個案例中，我們與第一個案例相比，在<divwrap>容器上添加了邊界約束的樣式。通過將其position屬性設置為relative，可以使其成為參照物，具有影響子元素定位的能力。然后我們為要拖拽的<div>元素綁定了onmousedown事件。在事件處理程序中，我們獲得了<div>元素的父容器<divwrap>元素，并在onmousemove事件處理程序中添加了邊界約束的計算邏輯。通過判斷新的left和top值是否超出了容器的邊界，并進行對應的調整，我們實現了拖拽<div>元素的邊界約束功能。通過以上兩個案例，我們展示了如何使用JavaScript代碼實現<div>拖拽<divwrap>的功能。通過獲取鼠標點擊位置與元素的相對位置，然后結合鼠標移動事件的監聽，不斷更新元素的位置，從而實現了拖拽的效果。通過添加邊界約束的計算邏輯，我們還可以實現拖拽元素的邊界約束功能，避免元素超出容器范圍。在實際的網頁開發中，我們可以根據具體需求，加入更多的功能，例如拖拽開始/結束事件的處理、拖拽元素的限制范圍、拖拽的邊界檢測等。
上一篇div 數字油畫