JavaScript 拖動陰影效果 在網頁中，我們經常會看到拖動元素的效果，這種效果能夠幫助用戶直觀的感受到影響力，也是近年來 Web 應用領域隨著 HTML5、CSS3 的發展而流行起來的趨勢。而拖動陰影的效果，則在此基礎上再次增強用戶的交互體驗，此篇文章將為大家介紹如何在 JavaScript 中實現拖動陰影的效果。 在實現拖動陰影的效果時，我們需要借助 HTML5 中提供的拖拽 API，該 API 包含 4 個事件，分別是 dragstart, dragenter, dragover 和 drop，我們可以根據這些事件來實現拖動陰影效果。 整個實現的思路是先將拖拽元素的陰影通過 CSS3 的陰影效果設置為透明度很低的狀態，當元素被拖拽時，再根據當前鼠標的位置和拖拽元素的大小，計算陰影應該顯示在哪個位置。 下面是該效果的代碼實現，首先我們需要創建拖拽元素。

<div id="drag-ele" draggable="true" ondragstart="dragstart(event)">拖動元素</div>

function dragstart(event) {
// 設置拖拽元素的陰影效果
event.dataTransfer.effectAllowed = 'move';
event.dataTransfer.setDragImage(img, 10, 10);
}

我們在這里為拖拽元素添加了一個事件監聽器，監聽 dragstart 事件，當元素被拖拽時觸發該事件，我們在該事件中設置拖拽元素的陰影效果，通過 effectAllowed 和 setDragImage 方法來設置。 在設置了拖拽元素的陰影效果后，我們需要在 dragenter 和 dragover 事件中計算陰影應該出現在哪個位置，這可以通過獲取當前鼠標的位置以及拖拽元素的大小來計算得到。

function dragenter(event) {
event.preventDefault();
}
function dragover(event) {
event.preventDefault();
// 獲取鼠標的位置
const mouseX = event.clientX;
const mouseY = event.clientY;
// 獲取拖拽元素的大小
const { width, height } = ele.getBoundingClientRect();
// 設置陰影的位置
const shadowX = mouseX - width / 2;
const shadowY = mouseY - height / 2;
ele.style.boxShadow = `${shadowX}px ${shadowY}px 10px rgba(0, 0, 0, 0.4)`;
}

在 dragenter 和 dragover 事件中，我們需要調用 preventDefault 方法，防止默認的瀏覽器行為打斷我們的拖拽效果。而獲取鼠標的位置和拖拽元素的大小，則可以分別通過 event.clientX/event.clientY 和 getBoundingClientRect 方法來獲取。 最后，我們在 dragend 事件中清空陰影效果。

function dragend(event) {
ele.style.boxShadow = '';
}

現在，我們已經完成了拖動陰影效果的實現，當然這只是其中一種實現方式，通過在 dragover 事件中動態計算陰影位置，也可以實現更加高級的拖動效果，比如陰影隨鼠標旋轉等等。 總結 拖動陰影效果能夠增強用戶的交互體驗，讓用戶更加直觀的感受到操作，而在 JavaScript 中實現拖動陰影效果，則依賴于 HTML5 中提供的拖拽 API。在實現時，我們需要借助該 API 提供的 dragstart, dragenter, dragover 和 dragend 四個事件，并通過計算鼠標位置和元素大小，設置陰影的位置。整個實現非常簡單，不過能夠為 Web 應用增加不少用戶體驗上的附加值。