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

前端（vue）入門到精通課程：進(jìn)入學(xué)習(xí)

核心屬性

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