CSS彈出窗口能夠為網頁增添很多交互性和美觀性，同時為用戶提供更好的體驗。而在彈出窗口中添加拖動效果，更能增強用戶的自定義體驗。實現這一效果需要以下幾個步驟。

Popup {
position: absolute;
/* ... */
}

第一步，首先需要將彈出窗口的position屬性設置為absolute，這樣才能在彈出窗口中添加拖動效果。

var dragObject = null;
Popup.onmousedown = function(e) {
if (e.which != 1) return;
dragObject = this;
this.oldX = e.pageX;
this.oldY = e.pageY;
return false;
};
document.onmousemove = function(e) {
if (dragObject) {
var dX = e.pageX - dragObject.oldX;
var dY = e.pageY - dragObject.oldY;
dragObject.style.left = (parseInt(dragObject.style.left) + dX) + 'px';
dragObject.style.top = (parseInt(dragObject.style.top) + dY) + 'px';
dragObject.oldX = e.pageX;
dragObject.oldY = e.pageY;
return false;
}
};
document.onmouseup = function(e) {
dragObject = null;
};

接下來，需要在JavaScript中為彈出窗口添加mousedown、mousemove以及mouseup事件監聽器，這樣才能為彈出窗口添加拖動效果。在mousedown事件中，需要記錄鼠標按下時的坐標值，并將dragObject設置為當前彈出窗口對象；在mousemove事件中，需要計算出鼠標移動的距離，并更新彈出窗口的位置；在mouseup事件中，需要將dragObject設置為null，取消彈出窗口的拖動效果。

.popup {
/* ... */
cursor: move;
}

最后，為彈出窗口添加一個鼠標樣式，讓用戶更加直觀地感受到彈出窗口的可拖動性。