vue-Draggable

vue 拖拽组件

📦 安装

步骤一

安装环境:

npm install @v3layout/vue-draggable

or if you prefer using Yarn:

yarn add @v3layout/vue-draggable

or if you prefer using Pnpm:

pnpm add @v3layout/vue-draggable

步骤二

进入项目

import Draggable from "@v3layout/vue-draggable";

步骤三

实例:

<template>
  <Draggable>
    <div class="draggable-item">I can now be moved around!</div>
  </Draggable>
</template>

<script>
import Draggable from "@v3layout/vue-draggable";

export default {
  components: {
    Draggable,
  },
};
</script>

<style>
.draggable-item {
  /* Your styles for draggable items */
}
</style>

Step 4: Enjoy!

<Draggable>
  <div>I can now be moved around!</div>
</Draggable>

导入组件

// ES6
import Draggable from "@v3layout/vue-draggable"; // The default
import { DraggableCore } from "@v3layout/vue-draggable"; // <DraggableCore>
import Draggable, { DraggableCore } from "@v3layout/vue-draggable"; // Both at the same time

// CommonJS
let Draggable = require("@v3layout/vue-draggable");
let DraggableCore = Draggable.DraggableCore;

<Draggable>

实例

<template>
  <div>
    <h1>Vue Draggable</h1>
    <Draggable>
      <div class="box">I can be dragged anywhere</div>
    </Draggable>
  </div>
</template>
<script>
import Draggable from '@v3layout/vue-draggable'
export default {
  components: {
    Draggable
  }
}
</script>
<style>
  html, body {
    height: 100%;
  }
  .vue-draggable, .cursor {
    cursor: move;
  }
  .box {
    background: #fff;
    border: 1px solid #999;
    border-radius: 3px;
    width: 180px;
    height: 180px;
    margin: 10px;
    padding: 10px;
    float: left;
  }
</style>

Draggable API

• style 行内样式.
• class 样式参数.
• onMousedown, onMouseup, onTouchstart, and onTouchend 事件.

<Draggable> Props:

type DraggableEventHandler = (e: Event, data: DraggableData) => void | false;
type DraggableData = {
  node: HTMLElement,
  x: number, y: number,
  deltaX: number, deltaY: number,
  lastX: number, lastY: number
};

/*
 * Props:
 */
{
// If set to `true`, will allow dragging on non left-button clicks.
allowAnyClick: boolean,

// Determines which axis the draggable can move. This only affects
// flushing to the DOM. Callbacks will still include all values.
// Accepted values:
// - `both` allows movement horizontally and vertically (default).
// - `x` limits movement to horizontal axis.
// - `y` limits movement to vertical axis.
// - 'none' stops all movement.
axis: string,

// Specifies movement boundaries. Accepted values:
// - `parent` restricts movement within the node's offsetParent
//    (nearest node with position relative or absolute), or
// - a selector, restricts movement within the targeted node
// - An object with `left, top, right, and bottom` properties.
//   These indicate how far in each direction the draggable
//   can be moved.
bounds: {left?: number, top?: number, right?: number, bottom?: number} | string,

// Specifies a selector to be used to prevent drag initialization. The string is passed to
// Element.matches, so it's possible to use multiple selectors like `.first, .second`.
// Example: '.body'
cancel: string,

// Class names for draggable UI.
// Default to 'vue-draggable', 'vue-draggable-dragging', and 'vue-draggable-dragged'
defaultClassName: string,
defaultClassNameDragging: string,
defaultClassNameDragged: string,

// Specifies the `x` and `y` that the dragged item should start at.
// This is generally not necessary to use (you can use absolute or relative
// positioning of the child directly), but can be helpful for uniformity in
// your callbacks and with css transforms.
defaultPosition: {x: number, y: number},

// If true, will not call any drag handlers.
disabled: boolean,

// Specifies the x and y that dragging should snap to.
grid: [number, number],

// Specifies a selector to be used as the handle that initiates drag.
// Example: '.handle'
handle: string,

// If desired, you can provide your own offsetParent for drag calculations.
// By default, we use the Draggable's offsetParent. This can be useful for elements
// with odd display types or floats.
offsetParent: HTMLElement,

// Called whenever the user mouses down. Called regardless of handle or
// disabled status.
onMousedown: (e: MouseEvent) => void,

// Called when dragging starts. If `false` is returned any handler,
// 开始拖动事件.
startFn: DraggableEventHandler,

// Called while dragging.
dragFn: DraggableEventHandler,

// 结束拖动事件.
stopFn: DraggableEventHandler,

// 节点 <DraggableCore>.
nodeRef: Ref<HTMLElement | null>,

// 位置 可使用百分比
position: {x: number, y: number}

// 位置 可使用百分比
positionOffset: {x: number | string, y: number | string},

// 缩放级别
scale: number
}

DraggableCore API

<DraggableCore> 参数:

{
  allowAnyClick: boolean,
  cancel: string,
  disabled: boolean,
  enableUserSelectHack: boolean,
  offsetParent: HTMLElement,
  grid: [number, number],
  handle: string,
  startFn: DraggableEventHandler,
  dragFn: DraggableEventHandler,
  stopFn: DraggableEventHandler,
  onMousedown: (e: MouseEvent) => void,
  scale: number
}