本篇文章分享一個Vue實戰(zhàn)，介紹下使用Vue的自定義指令實現(xiàn)鼠標拖動元素的效果以及解決移動端適配的問題。

前端（vue）入門到精通課程：進入學習

核心屬性

• Element.clientWidth：元素可視寬度。
• Element.clientHeight：元素可視高度。
• MouseEvent.clientX：鼠標相對于瀏覽器左上頂點的水平坐標。
• MouseEvent.clientY：鼠標相對于瀏覽器左上頂點的垂直坐標。
• Touch.clientX：觸點相對于瀏覽器左上頂點的水平坐標（移動端屬性）。
• Touch.clientY：觸點相對于瀏覽器左上頂點的垂直坐標（移動端屬性）。
• HTMLElement.offsetLeft：當前元素左上角相對于父節(jié)點（HTMLElement.offsetParent）的左邊偏移的距離。當元素脫離文檔流時（position: fixed）則相對于原點（瀏覽器左上頂點）偏移?！?br />