我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第4篇文章，[点击查看活动详情](https://s.juejin.cn/ds/jooSN7t "https://s.juejin.cn/ds/jooSN7t") 文章首次发表于我的个人博客：[https://xeblog.cn/articles/61](https://xeblog.cn/articles/61) ## 效果演示 ![zxzvk-ihdfx.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1a56316bda33419c9e5863e8eb80d65f~tplv-k3u1fbpfcp-watermark.image?) ## 核心属性 * **`Element.clientWidth`**：元素可视宽度。 * **`Element.clientHeight`**：元素可视高度。 * **`MouseEvent.clientX`**：鼠标相对于浏览器左上顶点的水平坐标。 * **`MouseEvent.clientY`**：鼠标相对于浏览器左上顶点的垂直坐标。 * **`Touch.clientX`**：触点相对于浏览器左上顶点的水平坐标（移动端属性）。 * **`Touch.clientY`**：触点相对于浏览器左上顶点的垂直坐标（移动端属性）。 * **`HTMLElement.offsetLeft`**：当前元素左上角相对于父节点（`HTMLElement.offsetParent`）的左边偏移的距离。当元素脱离文档流时（`position: fixed`）则相对于原点（浏览器左上顶点）偏移。 * **`HTMLElement.offsetTop`**：当前元素左上角相对于父节点（`HTMLElement.offsetParent`）的顶部偏移的距离。当元素脱离文档流时（`position: fixed`）则相对于原点（浏览器左上顶点）偏移。 * **`Element.style.top`**：可读可写，值为 `offsetTop`。 * **`Element.style.left`**：可读可写，值为 `offsetLeft`。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8699a0130d4543049c2315f5a1cba204~tplv-k3u1fbpfcp-zoom-1.image) ## 实现思路 > 待滑动元素必须设置 `position: fixed or absolute` 元素滑动需要依赖于鼠标的移动，鼠标的移动位置决定了元素滑动的位置，元素的位置是通过调整左上顶点坐标来的，所以我们要知道元素滑动后的左上顶点坐标，这样才能将元素移动到指定位置（鼠标悬停的位置）。首先要计算出鼠标在移动元素前相对元素的位置 `(x, y)` ： ``` // 鼠标当前的位置减去元素当前的位置 (x, y) = (e.clientX - el.offsetLeft, e.clientY - el.offsetTop) ``` 鼠标相对元素位置是指相对于元素左上顶点的位置。 `e` 指鼠标事件，`el` 指滑动的元素。知道了鼠标的相对位置，后续的鼠标移动，只要知道移动后的鼠标坐标，就能很容易的把元素的左上顶点坐标算出来。计算元素移动后的左上顶点坐标 `(x', y')` ： ``` // 鼠标当前的位置减去滑动前的相对位置 (x‘, y’) = (e.clientX - x, e.clientY - y) ``` `(x', y')` 就是要移动的最终坐标，然后调整元素位置即可 ```js el.style.left = x' + 'px' el.style.top = y' + 'px' ``` ## 代码 ```JavaScript ``` `drag` 是我们自定义的指令，在需要滑动的元素上绑定 `v-drag` 即可。 ## 注意 ### 自定义指令this指向问题在自定义指令 `directives` 内不能访问 `this`，如果需要修改 `data` 里的值，需要通过 `vnode.context.字段名 = 值` 修改。 ### 滑动后点击事件被触发鼠标事件触发顺序： `mouseover - mousedown - mouseup - click - mouseout` 滑动的前提是鼠标必须按下再滑动，所以在我们滑动完毕松开鼠标时，`click` 事件会被触发。解决方法：**定义一个标志变量，表示是否是滑动，点击事件执行时，将此变量作为前置条件，如果是在滑动则不执行**。 ```JavaScript // ... data() return { isDrag: false } } // ... el.onmousedown = (e) => { // ... vnode.context.isDrag = false document.onmousemove = (e) => { // 标记正在移动，解决元素移动后点击事件被触发的问题 vnode.context.isDrag = true // ... } } // ... methods: { click() { if (this.isDrag) { return } // ... } } ``` ### 移动端滑动问题移动端滑动时会触发默认事件，导致滑动卡顿。在要触发滑动的元素上加上 `@touchmove.prevent`，以阻止默认事件的发生。 ## 源码 [https://github.com/anlingyi/xeblog-vue/blob/master/src/components/xe-pokeball/index.vue](https://github.com/anlingyi/xeblog-vue/blob/master/src/components/xe-pokeball/index.vue)