背景：
在使用vuedraggable做一個拖動應用圖片排序的場景下，在android、iOS、chrome模擬移動設備 的情況，應用圖片用的是svg，大概率會出現ghost元素不消失，也不觸發end事件的詭異情況。
注意
PC端使用chrome 調試模式下，不開啟模擬移動設備不會出現這種情況，開啟來模擬移動設備也會出現。
解決辦法
給svg元素設置一個css樣式，即可；
svg {
pointer-events: none;
}
原因分析
根據上面出現，沒有觸發end事件，查看vuedraggable源代碼，可以看到vuedraggable是通過監聽類似：touchend,mouseup,pointerup類似這樣的事件，認為拖動結束，從而完成后續動作，移除ghost元素，並觸發end事件。
分析步驟：
在chrome 調試下監聽上面的三個touchend,mouseup,pointerup，發現只要出現上面的情況，這些事件都不會觸發。從而可以判斷是原來瀏覽器沒有觸發事件，在頁面是移除圖標，再此拖動，發現可以正常拖動排序。從而判斷問題出現在圖標上，圖標使用的svg。
看瀏覽器性能面板，是不是拖動svg會造成大量渲染，從而導致瀏覽器卡頓，從而沒有觸發上面的事件，經過實驗，並不是這個原因
猜測鼠標移動svg上，因為svg本身就具有動畫的效果，是不是和外面的事件沖突，阻擋了事件觸發，實驗在svg上用絕對定位放了一個空白的元素，發現問題解決。在這個思路上繼續找相關的答案，找到css屬性 pointer-events
pointer-events
【 CSS 屬性指定在什么情況下 (如果有) 某個特定的圖形元素可以成為鼠標事件的 target" 】。具體參考 pointer-events MDN的說明。
語法:
pointer-events屬性被指定為從下面的值列表中選擇的一個關鍵字。
值
- auto
與pointer-events屬性未指定時的表現效果相同，對於SVG內容，該值與visiblePainted效果相同 - none
元素永遠不會成為鼠標事件的target。但是，當其后代元素的pointer-events屬性指定其他值時，鼠標事件可以指向后代元素，在這種情況下，鼠標事件將在捕獲或冒泡階段觸發父元素的事件偵聽器。 - visiblePainted
只適用於SVG。元素只有在以下情況才會成為鼠標事件的目標：
visibility屬性值為visible，且鼠標指針在元素內部，且fill屬性指定了none之外的值
visibility屬性值為visible，鼠標指針在元素邊界上，且stroke屬性指定了none之外的值 - visibleFill
只適用於SVG。只有在元素visibility屬性值為visible，且鼠標指針在元素內部時,元素才會成為鼠標事件的目標，fill屬性的值不影響事件處理。 - visibleStroke
只適用於SVG。只有在元素visibility屬性值為visible，且鼠標指針在元素邊界時,元素才會成為鼠標事件的目標，stroke屬性的值不影響事件處理。 - visible
只適用於SVG。只有在元素visibility屬性值為visible，且鼠標指針在元素內部或邊界時,元素才會成為鼠標事件的目標，fill和stroke屬性的值不影響事件處理。 - painted
只適用於SVG。元素只有在以下情況才會成為鼠標事件的目標：
鼠標指針在元素內部，且fill屬性指定了none之外的值
鼠標指針在元素邊界上，且stroke屬性指定了none之外的值
visibility屬性的值不影響事件處理。 - fill
只適用於SVG。只有鼠標指針在元素內部時,元素才會成為鼠標事件的目標，fill和visibility屬性的值不影響事件處理。 - stroke
只適用於SVG。只有鼠標指針在元素邊界上時,元素才會成為鼠標事件的目標，stroke和visibility屬性的值不影響事件處理。 - all
只適用於SVG。只有鼠標指針在元素內部或邊界時,元素才會成為鼠標事件的目標，fill、stroke和visibility屬性的值不影響事件處理。
根據上面的屬性說明，可以看到默認的情況下，svg：visiblePainted，我們使用的svg是從sketch 軟件導出的，里面確實包含fill, stroke屬性，最終我們選擇粗暴的方式，設置為 “none” 解決。