vue 拖拽 光标

### Vue 实现拖拽光标效果 在 Vue 中实现拖拽光标的效果可以通过多种方式完成，以下是基于现有引用内容以及专业知识的一种实现方案。 #### 使用 `Vue Smooth DnD` 实现基础拖拽功能 如果目标是实现简单的拖拽排序功能，则可以直接利用 `Vue Smooth DnD` 这一库。它是一个快速、轻量级的拖放、可排序的 Vue.js 库，封装了 `smooth-dnd` 库[^1]。此库适用于列表项之间的拖拽操作，但对于更复杂的场景可能需要额外定制化逻辑。 #### 基于 Canvas 和鼠标事件的手动实现 对于更加自定义化的拖拽光标效果（例如按住 Ctrl 键并拖拽生成圆形图案），可以参考以下方法： - **HTML 部分** 创建一个 Vue 单文件组件 (`.vue`) 并引入 `<canvas>` 元素作为绘图区域。 - **JavaScript 部分** 添加必要的数据属性和方法用于跟踪鼠标的移动状态及按键情况，并绑定相应的事件监听器。 ```javascript export default { data() { return { isDragging: false, ctrlKeyHeld: false, startX: null, startY: null, currentX: null, currentY: null, }; }, methods: { startDrag(event) { this.ctrlKeyHeld = event.ctrlKey; if (!this.ctrlKeyHeld || !event.button === 0) return; const rect = event.target.getBoundingClientRect(); this.startX = event.clientX - rect.left; this.startY = event.clientY - rect.top; this.currentX = this.startX; this.currentY = this.startY; this.isDragging = true; this.$refs.canvas.getContext('2d').clearRect(0, 0, this.$refs.canvas.width, this.$refs.canvas.height); }, dragMove(event) { if (!this.isDragging) return; const rect = event.target.getBoundingClientRect(); this.currentX = event.clientX - rect.left; this.currentY = event.clientY - rect.top; this.drawCircle(this.startX, this.startY, Math.sqrt(Math.pow((this.currentX - this.startX), 2) + Math.pow((this.currentY - this.startY), 2))); }, stopDrag() { this.isDragging = false; }, drawCircle(x, y, radius) { const ctx = this.$refs.canvas.getContext('2d'); ctx.clearRect(0, 0, this.$refs.canvas.width, this.$refs.canvas.height); ctx.beginPath(); ctx.arc(x, y, radius, 0, Math.PI * 2); ctx.stroke(); } } }; ``` 在此代码片段中，我们实现了当用户按下 `Ctrl` 键的同时点击鼠标左键时，在画布上绘制动态更新的圆圈[^2]。 #### 结合 CSS 变换实现复杂交互 为了支持更多高级特性比如调整大小或者旋转角度等功能，还可以考虑结合 CSS 转换来增强用户体验。例如，通过捕获特定节点上的拖拽动作来实时修改其样式属性中的 transform 属性值。 另外一种常见的方式就是创建带有手柄的小图标放置于对象四周以便允许对其进行拉伸变形处理[^4]。 --- ### 总结 以上展示了两种不同的技术路线——借助第三方插件简化开发流程；或是深入底层原理自行构建完整的解决方案。开发者应依据项目的具体需求权衡选用合适的技术栈。