v-drag

The v-drag directive is used to handle scenarios where the shape and position of the target element are transformed based on mouse drag.

Examples

Basic

Edit this demo on GitHubEdit

<template>
<article>
  <div
    ref="target"
    v-drag:target.translate
    class="target"
  />
</article>
</template>

<script>
import { drag } from 'veui'

export default {
  directives: {
    drag
  }
}
</script>

<style lang="less" scoped>
.target {
  width: 80px;
  height: 80px;
  background: #e7e7e7;
}
</style>

Containment

Edit this demo on GitHubEdit

<template>
<article>
  <div
    ref="container"
    class="container"
  >
    <div
      ref="target"
      v-drag:target.translate="{containment: 'container'}"
      class="target"
    />
  </div>
</article>
</template>

<script>
import { drag } from 'veui'

export default {
  directives: {
    drag
  }
}
</script>

<style lang="less" scoped>
.target {
  width: 80px;
  height: 80px;
  background: #e7e7e7;
}

.container {
  width: 100%;
  height: 300px;
  background: #f7f7f7;
}
</style>

Multiple

主元素

Edit this demo on GitHubEdit

<template>
<article>
  <div
    ref="target1"
    v-drag:target1,target2,target3.translate
    class="target"
  >
    主元素
  </div>
  <div
    ref="target2"
    class="target"
  />
  <div
    ref="target3"
    class="target"
  />
</article>
</template>

<script>
import { drag } from 'veui'

export default {
  directives: {
    drag
  }
}
</script>

<style lang="less" scoped>
.target {
  width: 80px;
  height: 80px;
  background: #e7e7e7;
  display: inline-flex;
  margin-right: 40px;
  align-items: center;
  justify-content: center;
  vertical-align: top;
}

.container {
  width: 100%;
  height: 300px;
  background: #f7f7f7;
}
</style>

Directions

水平方向

垂直方向

Edit this demo on GitHubEdit

<template>
<article>
  <div
    ref="target1"
    v-drag:target1.translate.x
    class="target"
  >
    水平方向
  </div>
  <div
    ref="target2"
    v-drag:target2.translate.y
    class="target"
  >
    垂直方向
  </div>
</article>
</template>

<script>
import { drag } from 'veui'

export default {
  directives: {
    drag
  }
}
</script>

<style lang="less" scoped>
article {
  height: 200px;
}

.target {
  width: 80px;
  height: 80px;
  background: #e7e7e7;
  display: inline-flex;
  margin-right: 40px;
  align-items: center;
  justify-content: center;
  vertical-align: top;
}

.container {
  width: 100%;
  height: 300px;
  background: #f7f7f7;
}
</style>

Horizontal sorting

Lorem

ipsum

dolor

sit

amet

consectetur

adipiscing

elit

sed

eiusmod

tempor

incididunt

labore

dolore

magna

aliqua

Edit this demo on GitHubEdit

<template>
<article>
  <transition-group
    ref="group"
    name="list"
    tag="div"
    class="items"
  >
    <div
      v-for="item in items"
      :key="item"
      v-drag.sort.x="{
        name: 'words',
        containment: 'group',
        sort: sortCallback,
      }"
      class="item"
    >
      {{ item }}
    </div>
  </transition-group>
</article>
</template>

<script>
import { drag } from 'veui'

const items = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'.split(/[,. ]+/).filter(Boolean)

export default {
  directives: {
    drag
  },
  data () {
    return {
      items
    }
  },
  methods: {
    sortCallback (fromIndex, toIndex) {
      let items = this.items
      let item = items[fromIndex]
      items.splice(fromIndex, 1)
      items.splice(toIndex, 0, item)
    }
  }
}
</script>

<style lang="less" scoped>
.items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.item {
  background: white;
  border: 1px solid pink;
  border-radius: 3px;
  margin: 0 10px 8px 0;
  padding: 1px 2px;
}

.list-move {
  transition: transform 200ms ease;
}
</style>

Vertical sorting

Lorem

ipsum

dolor

sit

amet

consectetur

adipiscing

elit

sed

eiusmod

tempor

incididunt

labore

dolore

magna

aliqua

Edit this demo on GitHubEdit

<template>
<article>
  <transition-group
    ref="group"
    name="list"
    tag="div"
    class="items"
  >
    <div
      v-for="item in items"
      :key="item"
      v-drag.sort.y="{
        name: 'words',
        containment: 'group',
        sort: sortCallback,
      }"
      class="item"
    >
      {{ item }}
    </div>
  </transition-group>
</article>
</template>

<script>
import { drag } from 'veui'

const items = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'.split(/[,. ]+/).filter(Boolean)

export default {
  directives: {
    drag
  },
  data () {
    return {
      items
    }
  },
  methods: {
    sortCallback (fromIndex, toIndex) {
      let items = this.items
      let item = items[fromIndex]
      items.splice(fromIndex, 1)
      items.splice(toIndex, 0, item)
    }
  }
}
</script>

<style lang="less" scoped>
.item {
  background: white;
  border: 1px solid pink;
  border-radius: 3px;
  margin: 0 10px 8px 0;
  padding: 1px 2px;
}

.items {
  padding: 0;
  list-style-position: inside;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 300px;
  resize: both;

  .item {
    width: 20%;
    border-color: peachpuff;
  }
}

.list-move {
  transition: transform 200ms ease;
}
</style>

API

Please refer to the official document for the specific usage of the directive. For more detailed parameters, please refer to Custom Directive.

Options

Type: Object.

Name Type Default Description

type string - Specifies the type of drag behavior. Currently, there are two built-in modes: translate and sort, which can be extended.

disabled boolean false Whether the directive is disabled.

containment

string | Vue | HTMLElement | Object

During the transformation, the target element should always be located within the area specified by containment.

If the containment resolves to a DOM element, then all target elements should be transformed within that element. If it resolves to a rectangular area description (relative to the viewport's top, left, width, height), then all target elements should be transformed within that rectangular area.

Type	Description
`string`	Find the specified DOM element based on the `ref` in the context of the directive's component. Passing `@window` calculates the viewport position.
`Vue`	Find the DOM element based on the component instance.
`HTMLElement`	Directly accept a DOM element.
`Object`	`translate` Accepts any plain object containing the fields `{ top, left, width, height }`, representing the coordinates and size of the rectangular area relative to the viewport, all four fields are of type `number`.

handle string | Vue | HTMLElement - Specifies the "handle" element for the drag operation. Only dragging the corresponding element will trigger the drag. The type is the same as the containment parameter (the plain Object type is not supported), and if the string type does not find the ref, it will try to use it as a CSS selector.

exclude string - Used to specify elements that are not used as "handles". Generally used to remove some elements from the "handle" to avoid triggering drag. The string type is used as a CSS selector.

targets

Array<string | Vue | HTMLElement>

[]

translate

This parameter specifies the target element set. When you drag the mouse on the element where the directive is located, all target elements will be transformed according to the specified method.

Type	Description
`string`	Find the specified DOM element collection based on `ref` in the component context where the directive is located.
`Vue`	Component instance, use `vm.$el` element directly.
`HTMLElement`	DOM element, use directly.

axis string - Limits all target elements to transform or specifies the drag sorting element sorting direction in the horizontal or vertical direction. Optional value type: 'x' | 'y'.

dragstart

function(): Object

function() {}

The callback function for the drag start event. The callback parameters are ({ event: DragEvent }).

drag

function(): Object

function() {}

The callback function for the drag event. The callback parameters are ({ event, distanceX, distanceY }).

Name	Type	Description
`event`	`DragEvent`	The original drag event object.
`distanceX`	`number`	The total distance moved horizontally since the drag began.
`distanceY`	`number`	The total distance moved vertically since the drag began.

dragend function(): Object function() {} The callback function for the drag end event. The callback parameters are the same as drag.

ready function function() {} Callback function when the directive is initialized. A handle object parameter is passed out, and this object has a reset() method to reset all target elements to the state before the transformation.

name

string

sort

Used to mark the drag sorting group name, and sorting will be performed between elements with the same group name.

sort

function(fromIndex: number, toIndex: number): void

sort

The sorting directive only informs the user of the sorting situation through the callback, that is: moving from the original position (fromIndex) to the new position (toIndex), and the data source needs to be updated based on this information.

The options value will override the parameters specified by the directive's arguments and modifiers.

Modifiers

Corresponding to the values of type / axis in the Object options. For example:

<!-- Apply displacement transformation along the vertical direction -->
<div v-drag.translate.y></div>

Arguments

Corresponding to the targets field in the Object options. The value is a string of one or more ref separated by commas. For example:

<div v-drag:box1,box2></div>

Extension

You can extend the v-drag directive by inheriting from BaseHandler:

import BaseHandler from 'veui/directives/drag/BaseHandler'
import { registerHandler } from 'veui/directives/drag'

class RotateHandler extends BaseHandler { }

registerHandler('rotate', RotateHandler)

Then use RotateHandler with the type parameter:

<div v-drag="{ type: 'rotate' }"></div>
<!-- or -->
<div v-drag.rotate></div>

The name of type cannot conflict with existing modifiers.

`BaseHandler`

The members of BaseHandler are explained as follows:

Member	Type	Description
`options`	`Object`	An object composed of parsed parameters.
`context`	`Vue`	The component where the directive is used.
`isDragging`	`boolean`	Whether it is in the process of dragging.
`start`	`function(Object)`	Same as the `dragstart` field in the options.
`drag`	`function(Object)`	Same as the `drag` field in the options.
`end`	`function(Object)`	Same as the `dragend` field in the options.
`destroy`	`function()`	Called when the directive is unbound from the DOM element.
`setOptions`	`function(options)`	Set the parameters.
`reset`	`function()`	Reset the transformation.

Edit this page on GitHubEdit