HTML5原生拖拽克隆體背景被剪切？如何解決？

原生 draggable 屬性拖動克隆體背景被剪切的解決方法

在使用 html5 原生 draggable 屬性進行拖拽操作時，常常會遇到一個問題：克隆體在拖動過程中，其背景（包括顏色或圖片）會被剪切掉，只留下元素本身。這篇文章將針對這個問題，探討如何避免克隆體背景被剪切，只保留克隆元素本身。

問題描述：

用戶在進行拖拽操作時，發現拖拽元素的克隆體丟失了背景顏色或圖片，只顯示了元素內容本身。如圖所示，拖拽的元素包含背景色，但拖拽過程中克隆體卻失去了背景色。

解決方法：

立即學習“前端免費學習筆記（深入）”；

問題的關鍵在于拖拽的對象。如果拖拽的是包含背景色的 div 元素，那么克隆體也會繼承這個背景。但如果僅僅拖拽 div 元素內部的文字內容，則克隆體不會包含背景。

因此，解決方法是：避免將包含背景的容器元素作為拖拽對象。 應該只選擇需要拖動的元素內容作為 draggable 屬性的目標。 如果你的元素背景是通過樣式設置在父元素上的，那么需要將樣式應用到被拖拽的元素上，而不是其父元素。

一個有效的方案是：只將需要拖拽的文本或圖像等內容元素設置為 draggable，而不是包含它們的父容器。這樣，克隆體只會包含這些元素本身，而不會包含父容器的背景。 這可以確保克隆體只包含你想要的內容，避免背景被剪切的問題。