<pa>div拖動和改變大小（resize）是前端開發中常見的需求。div元素是網頁布局中最常用的容器，通過拖動和改變大小，我們可以實現更加靈活的頁面布局效果。在本文中，我們將介紹如何通過使用HTML5中的draggable屬性和CSS中的resize屬性來實現div的拖動和改變大小。</pa>
<pa>，我們來看一個簡單的例子，實現一個可拖動的div。我們可以給div元素添加draggable="true"屬性，使其具有拖動的功能。然后，通過JavaScript監聽div元素的drag事件，在事件處理函數中，我們可以獲取鼠標的位置，然后計算出鼠標相對于div元素的偏移量，再將div元素的位置設置為鼠標位置減去偏移量。這樣，當我們拖動div元素時，它就會跟隨鼠標一起移動。</pa>

<div draggable="true" ondrag="drag(event)" style="width: 100px; height: 100px; background-color: #ccc;">
拖動我
</div>
<br>
<script>
function drag(event) {
var div = event.target;
var offsetX = event.clientX - parseInt(div.style.left);
var offsetY = event.clientY - parseInt(div.style.top);
<br>
  document.onmousemove = function(event) {
div.style.left = event.clientX - offsetX + "px";
div.style.top = event.clientY - offsetY + "px";
};
<br>
  document.onmouseup = function() {
document.onmousemove = null;
document.onmouseup = null;
};
}
</script>

<pa>接下來，我們來看如何實現div的改變大小。CSS中提供了resize屬性，可以控制元素的可調整大小。我們可以給div元素添加resize屬性，并設置為"both"、"horizontal"或"vertical"來指定可調整大小的方向。然后，在頁面中添加一些CSS樣式，如下所示：</pa>

<div style="resize: both; overflow: auto; width: 200px; height: 200px; background-color: #ccc;">
可調整大小的div
</div>

<pa>這樣，我們就可以在網頁中看到一個可調整大小的div元素了。當鼠標移動到div元素的邊界時，會出現一個可調整大小的光標，我們可以點擊并拖動邊界來改變div元素的大小。</pa>
<pa>除了CSS的resize屬性，還可以使用JavaScript來實現div的改變大小。通過監聽鼠標按下、移動和釋放的事件，我們可以計算出鼠標相對于div元素的偏移量，并根據偏移量改變div元素的大小。下面是一個示例：</pa>

<div id="resizable" style="width: 200px; height: 200px; background-color: #ccc;">
可調整大小的div
</div>
<br>
<script>
var resizable = document.getElementById("resizable");
var startX, startY, startWidth, startHeight;
<br>
resizable.addEventListener("mousedown", function(event) {
startX = event.clientX;
startY = event.clientY;
startWidth = parseInt(document.defaultView.getComputedStyle(resizable).width, 10);
startHeight = parseInt(document.defaultView.getComputedStyle(resizable).height, 10);
<br>
  document.addEventListener("mousemove", resize);
document.addEventListener("mouseup", stopResize);
});
<br>
function resize(event) {
var deltaX = event.clientX - startX;
var deltaY = event.clientY - startY;
<br>
  resizable.style.width = (startWidth + deltaX) + "px";
resizable.style.height = (startHeight + deltaY) + "px";
}
<br>
function stopResize() {
document.removeEventListener("mousemove", resize);
document.removeEventListener("mouseup", stopResize);
}
</script>

<pa>在上面的代碼中，我們通過使用JavaScript監聽mousedown、mousemove和mouseup事件，來實現div的改變大小。當鼠標按下時，我們記錄下鼠標的位置和div元素的初始寬度和高度。隨后，在mousemove事件的處理函數中，我們計算出鼠標的偏移量，并根據偏移量改變div元素的大小。當鼠標釋放時，我們移除事件監聽器，停止改變div的大小。</pa>
<pa>通過draggable屬性和resize屬性，我們可以輕松實現div的拖動和改變大小。這些技術不僅可以用于div元素，還可以應用于其他元素，如圖片、面板等，從而為網頁增加更多的交互性和可定制性。</pa>