v-drag-simple

这是在Vue.js中集成drag的最简单方法。

可拖动元素是一种常见的用户体验模式，特别是在触摸屏上。但作为一名开发人员，你可能知道将其应用于JavaScript有多么具有挑战性。简化一下，我们用v-drag-simple。它的目标是使用Vue.js在项目中快速集成和自定义可拖动的元素。

目录

1. 安装
2. 用法
3. 选项
   • moveEl
   • direction
   • 事件回调
     • onStart
     • onEnd
     • onDragging

安装

npm install v-drag-simple

v-drag-simple的源代码没有经过压缩

用法

将v-drag-simple导入到main.js中

import { vDrag } from 'v-drag-simple'

然后注册v-drag-simple插件

app.directive('drag', vDrag)

此时不需要额外的设置。为任意元素添加 v-drag 属性，使其可以拖动：

<div v-drag>Drag me!</div>

选项

具有 v-drag 属性的任何元素的默认行为是可以在任何方向上拖动，而无需句柄。但是，这可以使用对象或等价的快捷方式来更改：

<div v-drag="{
               moveEl: '.bpx-player-progress',
               direction: {left: true, right: true, top: false, bottom: false},
               onStart: (e, {startX, startY}) => console.log('start'),
               onEnd: (e) => console.log('end'),
               onDragging: (e, {percentX, percentY}) => console.log(percentX, percentY),
             }" class="slider">
</div>

对象和值都可以像上面的例子那样内联声明，或者使用 data 对象、计算属性、方法、props…

moveEl

moveEl 选项允许你指定一个选择器字符串，以限制拖动操作仅在该子元素上触发。这对于实现拖动句柄非常有用。

direction

direction 选项允许你指定一个对象，定义允许拖动的方向。

{
  left: true,   // 允许向左拖动
  right: true,  // 允许向右拖动
  top: false,   // 禁止向上拖动
  bottom: false // 禁止向下拖动
}

事件回调

v-drag-simple 提供了三个事件回调选项，允许你在拖动操作的不同阶段执行自定义逻辑。

onStart

onStart 回调在拖动操作开始时触发。它接收两个参数：事件对象和一个包含初始坐标的对象。

onStart: (e, {startX, startY}) => {
  console.log('Drag started at:', startX, startY);
}

onEnd

onEnd 回调在拖动操作结束时触发。它接收一个参数：事件对象。

onEnd: (e) => {
  console.log('Drag ended');
}

onDragging

onDragging 回调在拖动操作进行中持续触发。它接收两个参数：事件对象和一个包含当前拖动百分比的对象。

onDragging: (e, {percentX, percentY}) => {
  console.log('Dragging at:', percentX, percentY);
}