在現代網頁設計中，modal（彈出窗口）經常被用來展示重要或者需要用戶操作的內容。然而，在實際的網站應用中，很多modal都是無法拖動的，這對于用戶交互來說會非常不友好。

幸運的是，我們可以通過CSS實現modal的拖動效果，讓用戶更加方便地去調整modal的位置和大小。以下是一個簡單的示例代碼：

/* modal容器 */
#myModal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 200px;
border: 1px solid #ccc;
background-color: #fff;
}
/* modal標題 */
#myModal h3 {
margin: 0;
padding: 10px;
background-color: #f1f1f1;
cursor: move;
}
/* JS代碼 */
var modal = document.getElementById('myModal');
var header = document.getElementsByTagName('h3')[0];
var isDragging = false;
var startX, startY, modalLeft, modalTop;
header.addEventListener('mousedown', startDragging);
function startDragging(e) {
isDragging = true;
startX = e.clientX;
startY = e.clientY;
modalLeft = modal.offsetLeft;
modalTop = modal.offsetTop;
}
document.addEventListener('mousemove', dragging);
document.addEventListener('mouseup', stopDragging);
function dragging(e) {
if (!isDragging) return;
var deltaX = e.clientX - startX;
var deltaY = e.clientY - startY;
modal.style.left = modalLeft + deltaX + 'px';
modal.style.top = modalTop + deltaY + 'px';
}
function stopDragging(e) {
isDragging = false;
}

在示例代碼中，我們首先設置了modal的位置和大小，并為modal的標題添加了一個事件監聽器，用于實現拖動效果。隨后，我們定義了一些變量，用于保存拖動過程中需要用到的信息。在標題mousedown事件中，我們設置isDragging為true，表示拖動正在進行中，并且記錄了modal的開始位置。在mousemove事件中，我們根據鼠標的移動計算出modal的新位置，并通過CSS樣式來實時更新modal的位置。在mouseup事件中，我們將isDragging設置為false，表示拖動已經結束。

通過這樣的代碼實現，我們就可以為modal添加一個非常實用的拖動效果。值得注意的是，拖動效果的實現需要依賴JavaScript，而且在一些舊的瀏覽器中可能無法正常工作。因此，在實際的網站應用中，我們需要非常謹慎地使用這個技巧。