The simplest way to integrate drag on Vue.js

Draggable elements are a common UX pattern, specially on touch screens. But as a developer, you might know how challenging it is to apply it with JavaScript. Vue.js doesn’t help in this case, either. So to simplify things, v-drag was written. Its purpose is to quickly integrate and customize draggable elements on projects using Vue.js.

npm install v-drag --save
import drag from 'v-drag';

Vue.use(drag);
<div v-drag>Drag me!</div>

Features

Axis

Restrict the movement of the element so that it can only follow the direction of either vertical or horizontal axis.

Handle

Make the element move only when one or more specific objects are dragged, whether they are inside or outside.

Axis

Restrict the movement of the element so that it can only follow the direction of either vertical or horizontal axis.

Handle

Make the element move only when one or more specific objects are dragged, whether they are inside or outside.

Axis

Restrict the movement of the element so that it can only follow the direction of either vertical or horizontal axis.

Handle

Make the element move only when one or more specific objects are dragged, whether they are inside or outside.

Get startedTry it live