10 minutes to start Vue component Vue draggable


Vue combines the advantages of Angualr and react. Because of its easy to use and lightweight, it is widely used. It has become a hot front-end framework, attracting more and more front-end developers!

In this article, we will take you to Vue draggable component quickly through a simple drag and drop example.

First, you need to configure Vue cli in your work environment to create a Vue project.

vue create test_1

There are many installation steps when creating a project. Follow the instructions below to select the configuration:

1. Pick a preset to select manually select features


2. Check the features needed for your project and select Babel and CSS pre processors (use the space bar to check or cancel)


3. Pick a CSS pre processor select sass / SCSS (with node SASS)


4. Where do you prefer placing config select in dedicated config files


5.Save this as a preset for future projects? Select Yes and fill in a name. Later Vue projects can continue to use this configuration


6. Pick the package manager to use when installing dependencies and select use NPM


OK, the preparations are ready. Now we can enter the content of Vue draggable.

First,cd test_1Enter the project directory and configure Vue draggable.

npm i vuedraggable -S

Then, insrc/componentsNew under directoryDraggable.vue

stayIntroduce and register the < code > vuedraggable < / code > component in < / code > and write a little data for verification:</p>
import Draggable from "vuedraggable"

const message = [
"vue.js 2.0",

export default {
components: {
data () {
return {
list: message.map((name, index) => {
return { name, order: index + 1 };

Then we canUse draggable for fun.

{{ element.name }}

Note that in the draggable tag, tag = ‘UL’ is used to specify the HTML tag rendered by the draggable component. V-model binds the draggable elements of the list, that is, the list in data (), which is usually consistent with the reference of the internal element V-for in draggable.

V-bind is used to bind the configuration items of draggable components. See the details:

  • group:string or object
  • String: named. It is used to set the container that can be dragged and dropped
  • object: {name, pull, put}
  • Name: the same as string
  • Pull: pull is used to define the settings to be moved out of this list container, true / false / ‘clone’ / function
  • True: list elements in the list container can be removed;
  • False: list elements in the list container cannot be moved out;
  • Clone: move out the list element and move the copy of the element;
  • Function: used to judge the pull function. It can perform complex logic. Return false / true in the function to judge whether to move out or not;
  • Put: put is used to define the settings for placing list elements in this list container, true / false / [‘foo ‘,’bar’] / function
  • True: List container can put list elements from other list containers;
  • False: opposite to true;
  • [‘foo ‘,’ bar ‘]: this can be a string or an array of strings, representing the name value defined in the group configuration item;
  • Function: it is used to judge the function of put. It can be used for complex logic. Return false / true in the function is used to judge whether to put in or not
  • Animation: number unit: ms, defining the time of animation;
  • Disabled: Boolean defines whether the sortable object is available. If it is true, the sortable object cannot be dragged and dropped for sorting. If it is false, the sortable object can be sorted, which is equivalent to a switch;
  • Ghostclass: the selector format is a string of simple CSS selectors. When dragging list elements, a copy will be generated as shadow elements to simulate the sorting of dragged elements. This configuration item is to add a class to the shadow element. We can use this formula to edit the shadow element;
  • Sort: Boolean defines whether list elements can be dragged and sorted in the list container;
  • Delay: number defines the delay time when the selected list element can be dragged;
  • Handle: the selector format is the string of a simple CSS selector, which makes the elements in the list element that match the selector become the drag handle. Only pressing and holding the drag handle can make the list element drag;
  • Filter: the selector format is a string of simple CSS selectors. It defines which list elements cannot be dragged and dropped. It can be set to multiple selectors, separated by “,”
  • Draggable: selector is a string of simple CSS selectors, which defines which list elements can be dragged and dropped
  • Choinclass: a string with the format of a simple CSS selector. When a list element is selected, a class will be added to the element;
  • Forcefallback: if Boolean is set to true, native HTML5 drag and drop will not be used, and the style of some elements in drag and drop can be modified;
  • Fallbackclass: string when forcefallback is set to true, the style of the mouse attached elements during the drag and drop process;
  • Scroll: Boolean is true by default. When the sorting container is a scrollable region, drag and drop can cause region scrolling.

Configure the corresponding class style again:

.ghost {
  opacity: 0.5;
  background: #c8ebfb;
.list-group {
  min-height: 20px;
  list-style: none;
.list-group-item {
  cursor: move;
  height: 30px;
  line-height: 30px;
  border: 1px solid #ccc;

Finally, modify the app.vue registration component as follows:

import Draggable from './components/Draggable'

export default {
  name: 'app',
  components: {

Start the project and check the effect in the browser!

npm run server

It’s very simple, right? It’s 10 minutes fast!