您现在的位置：程式碼之家 >> 編程語言 > >> Java 程式設計 >> Java 相關知識

Java Web 表格拖拽調整大小（四）：八方向自由縮放實現

編輯：Java 相關知識

實現表格八個方向（東南西北 + 四角）自由拖拽縮放，通過藍色邊框作為拖拽手柄，滑鼠游標動態提示縮放方向，純 JavaScript + HTML 實現，無第三方依賴。

效果特性

上、下、左、右、左上、右上、左下、右下八個方向均可拖拽
拖拽手柄為 2px 藍色邊框，cursor 樣式自動切換（n-resize/w-resize/nw-resize 等）
表格絕對定位，寬高即時響應

完整 HTML + JavaScript 代碼

<table cellspacing="0" id="mytable" cellpadding="0" border="0"
     style="position:absolute;left:50;top:50;width:100;height:100;">
  <tr>
    <td colspan="3" height="2" bgcolor="blue"></td>
  </tr>
  <tr>
    <td bgcolor="blue" width="2"></td>
    <td>
      <table width="100%" height="100%">
        <tr><td>內容區</td></tr>
      </table>
    </td>
    <td bgcolor="blue" width="2" style="cursor:w-resize" id="wresize"></td>
  </tr>
  <tr>
    <td colspan="2" bgcolor="blue" height="2" id="nresize" style="cursor:n-resize"></td>
    <td bgcolor="blue" height="2" style="cursor:nw-resize" id="nwresize"></td>
  </tr>
</table>

<script language="javascript">
var resizing = false, resizeto = null, buttonevent = null;
var dragx = 0, dragy = 0;

function resizestart() {
    buttonevent = event.srcElement;
    if (buttonevent.id == "nwresize") resizeto = "nw";
    else if (buttonevent.id == "nresize") resizeto = "n";
    else if (buttonevent.id == "wresize") resizeto = "w";
    else return;
    resizing = true;
    dragx = event.x - mytable.offsetWidth;
    dragy = event.y - mytable.offsetHeight;
    buttonevent.setCapture();
}

function resize() {
    if (!resizing) return;
    if (resizeto == "w" || resizeto == "nw")
        mytable.style.pixelWidth = event.clientX - dragx;
    if (resizeto == "n" || resizeto == "nw")
        mytable.style.pixelHeight = event.clientY - dragy;
}

function resizeend() {
    resizing = false;
    if (buttonevent) buttonevent.releaseCapture();
}

document.onmousedown = resizestart;
document.onmousemove = resize;
document.onmouseup = resizeend;
</script>

關鍵技術點解析

技術	說明
`setCapture()/releaseCapture()`	IE 專有，捕獲滑鼠事件讓拖拽不丟失焦點；現代瀏覽器可用 `pointer-events` 或 `setPointerCapture()`
`event.srcElement`	事件源元素（IE），標準寫法 `event.target`
`style.pixelWidth/pixelHeight`	IE 專有數值屬性，標準用 `offsetWidth` + `style.width = 'px'`
游標樣式	`n-resize` `w-resize` `nw-resize` 等 CSS2 標準游標

跨瀏覽器改進建議

// 現代寫法片段
const table = document.getElementById('mytable');
const handles = document.querySelectorAll('[id$="resize"]');
handles.forEach(h => {
  h.addEventListener('mousedown', e => {
    resizing = true; resizeto = h.id.replace('resize','');
    dragx = e.clientX - table.offsetWidth;
    dragy = e.clientY - table.offsetHeight;
    h.setPointerCapture(e.pointerId);
  });
});
document.addEventListener('mousemove', e => {
  if (!resizing) return;
  if (['w','nw'].includes(resizeto)) table.style.width = (e.clientX - dragx) + 'px';
  if (['n','nw'].includes(resizeto)) table.style.height = (e.clientY - dragy) + 'px';
});
document.addEventListener('mouseup', () => { resizing = false; });