HTML5拖放內部子級

Question

一個簡單的問題，當使用DnD啟用元素時，如果您有一個內部子元素（例如，令人贊嘆的font元素），則單擊內部元素似乎無法拖動父元素。 這意味着在拖動元素時，用戶必須單擊子級周圍的填充。

這是我的元素：

<a id="dragme" draggable="true"><i class="fa fa-search"></i></a>

下面演示了拖動時的故障行為。 單擊圖標本身時，嘗試拖動。 我使用的是最新的Firefox，不確定在其他瀏覽器上是否也會發生相同的行為。

http://jsfiddle.net/v6e5V/1/

有什么技巧可以解決整個元素可拖動的問題？

謝謝

Answer 1

解決方案是向以下子元素添加pointer-events: none ，將執行以下操作：

元素永遠不是鼠標事件的目標； 但是，如果鼠標后代的指針事件設置為其他值，則鼠標事件可能以其后代元素為目標。 在這些情況下，鼠標事件將在事件捕獲/冒泡階段期間按適當的方式在此父元素上觸發事件偵聽器，以使其進入/流出后代。

參見更新的jsFiddle 。