How to use vue.js to implement drag and drop function

Preface

Adding drag and drop functionality is a great way to make your program more natural and user-friendly. Although there are libraries that provide drag and drop functionality, it is useful to understand how they work under the hood.

In this article, we will use the built-in HTML drag and drop API to implement a simple drag and drop system. Like this:

Drag and Drop API

The HTML drag and drop API is a built-in method that contains several events and attributes, but can be summarized as handling it with two types of elements in mind.

1. Draggable elements: elements that can be dragged
2. Droppable elements: Elements that can receive dragged elements
   

If analyzed this way, it will make it easier to analyze drag and drop events.

Drag and drop events

There are eight drag and drop events in the API that can be used in our program.

• drag: The draggable item is being dragged
• dragstart: Start dragging the draggable element
• dragend: drag ends (for example, release the mouse)
• dragenter : The dragged item enters the droppable element
• dragleave – the draggable item leaves the droppable element
• dragover: The draggable item moves over the droppable element (called every 100 milliseconds or so)
• drop: The draggable item is dropped on the droppable element
  

dataTransfer Object

One of the most important things to know about the drag and drop API is that it adds a dataTransfer object to the event.

The dataTransfer object allows us to set data when we start dragging an element and access the same data when we drop the element in the drop zone.

There are a few properties and methods we should know about dataTransfer (check out the dataTransfer API documentation if you want to learn more).

• dropEffect: The current drag-and-drop operation (e.g., move, copy)
• effectAllowed: Specifies the drag and drop operation
• setData(name, val): allows us to add values ​​to the dataTransfer object
• getData(name): retrieve the stored value
  

Create your own drag and drop system

As you can see there are two lists in this example and we can drag and drop items between them smoothly.

Configuring our project

First, we have to set up the data. In the script, create an array of item objects, the properties of which are:

• id: A unique ID so that we can look up the object
• title: the text to be displayed
• list: The list to which it belongs.

I decided to add three items to this array:

data () {
    return {
      items: [
      {
        id: 0,
        title: 'Item A',
        list: 1
      },
      {
        id: 1,
        title: 'Item B',
        list: 1
      },
      {
        id: 2,
        title: 'Item C',
        list: 2
      }]
    }
}

Two additional computed properties are created to filter the list of items to just those in list 1 and those in list 2.

computed: {
    listOne () {
      return this.items.filter(item => item.list === 1)
    },
    listTwo () {
      return this.items.filter(item => item.list === 2)
    }
}

It is better to create computed properties instead of using v-if inside v-for.

Created template code

This is the outline of the component. This code will display all the content but without the drag and drop functionality.

<template>
  <div>
    <div class='drop-zone'>
      <div v-for='item in listOne' :key='item.title' class='drag-el'>
        {{ item.title }}
      </div>
    </div>
    <div class='drop-zone'>
      <div v-for='item in listTwo' :key='item.title' class='drag-el'>
        {{ item.title }}
      </div>
    </div>
  </div>
</template>

The style of the component is not important. It’s important that your drop zone has a certain height, even without elements inside, otherwise, you won’t be able to hover over it!

<style scoped>
  .drop-zone {
    background-color: #eee;
    margin-bottom: 10px;
    padding: 10px;
  }

  .drag-el {
    background-color: #fff;
    margin-bottom: 10px;
    padding: 5px;
  }
  
</style>

This is achieved by adding some padding to the drop zone style.

Adding drag and drop functionality

Start by adding a couple of methods to your script: one to use when you start dragging an element, and one to use when you drop the element.

For the startDrag method, we want to use the dataTransfer property discussed earlier to store the ID of the element to be dragged. Additionally this drag event will be an action.

startDrag: (evt, item) => {
      evt.dataTransfer.dropEffect = 'move'
      evt.dataTransfer.effectAllowed = 'move'
      evt.dataTransfer.setData('itemID', item.id)
}

The stored ID is then retrieved in ondrop so that we can access the correct item in the array.

onDrop (evt, list) {
      const itemID = evt.dataTransfer.getData('itemID')
      const item = this.items.find(item => item.id == itemID)
      item.list = list
}

Add the template code below.

First add the event to the event. Need to make the element draggable and detect the drag start event.

<div 
        class='drag-el' 
        v-for='item in listTwo' 
        :key='item.title' 
        draggable
        @dragstart='startDrag($event, item)'
 >
        {{ item.title }}
</div>

Since we added the draggable attribute, if you run the program you should be able to drag the element like this, but you won't be able to drop it anywhere.

Let's give it a drop zone that accepts the draggable element. First, add a drop event listener that calls the onDrop method.

<div
      class='drop-zone'
      @drop='onDrop($event, 1)' 
>

But note that we must call preventDefault on both the dragEnter and dragOver drag and drop hooks.

Because by default, these two methods do not allow to delete elements. So in order for our drop event to work properly, its default action must be prevented.

This can be done using Vue's built-in .prevent event modifier.

<div
      class='drop-zone'
      @drop='onDrop($event, 1)' 
      @dragover.prevent
      @dragenter.prevent
>

Now run the program and you can see that everything works fine. We can drag and drop elements between two different lists.

Summarize

Although this example is very simple, it gives you a good understanding of how the HTML drag and drop API works. It's actually not as difficult as you think.

This is the end of this article on how to use vue.js to implement drag and drop function. For more relevant vue.js drag and drop function content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!