How to use HTML 5 drag and drop API in Vue

The Drag and Drop API adds draggable elements to HTML, allowing us to build web applications with rich UI elements that can be dragged.

In this article we will build a simple kanban application using Vue.js. Kanban is a project management tool that allows users to visually manage projects from start to finish. Tools like Trello, Pivotal Tracker, and Jira are examples of kanban apps.

Setting up the board

Run the following command to create our kanban project:

vue create kanban-board

When you create a project, the selection only includes the default presets for Babel and ESlint.

Once completed, delete the default component HelloWorld and modify the App component to be empty, containing only the bare component template:

<template> <div></div> </template>
<script>
export default {
 name: 'App',
 components: {},
};
</script>
<style></style>

Next, we’ll use Bootstrap for styling. All we need is the Bootstrap CSS CDN. Add this to the head of public/index.html.

<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width,initial-scale=1.0">
 <link rel="icon" href="<%= BASE_URL %>favicon.ico" rel="external nofollow" >
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="external nofollow" 
 integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
 <title><%= htmlWebpackPlugin.options.title %></title>
 </head>

Building UI components in Kanban

The board should look like this:

Typically a board has columns and cards. Cards are individual items or tasks to be performed, and columns are used to show the status of a specific card.

So you need to create three Vue components: one for the columns, one for the cards, and the last one for creating new cards.

Creating the card component

Let's create the card component first. Create a new file Card.vue in the /component directory.

Add the following code to the component:

<template>
 <div class="card">
 <div class="card-body">A Sample Card</div>
 </div>
</template>
<script>
export default {};
</script>
<style scoped>
div.card {
 margin-bottom: 15px;
 box-shadow: 0 0 5px #cccccc;
 transition: all ease 300ms;
 background: #fdfdfd;
}
div.card:hover {
 box-shadow: 0 0 10px #aaaaaa;
 background: #ffffff;
}
</style>

This creates and styles the card component. However, we haven't added draggable functionality to the component yet, as this is just the skeleton of the component.

Creating the AddCard Component

As the name suggests, this component will be responsible for creating new cards and adding them to the column.

Create an AddCard.vue file in the /components directory and add the following code:

<template>
 <div class="">
 <button
  class="btn btn-sm btn-info w-100"
  v-if="!inAddMode"
  @click="inAddMode = true"
 >
  Add Card
 </button>
 <form action="#" class="card p-3" ref="form" v-else>
  <div class="form-group">
  <input
   type="text"
   name="title"
   id="title"
   class="form-control"
   placeholder="Something interesting..."
   v-model="cardData"
  />
  </div>
  <div class="d-flex justify-content-center">
  <button type="submit" class="btn w-50 btn-primary mr-3">Save</button>
  <button type="reset" class="btn w-50 btn-danger">
   Cancel
  </button>
  </div>
 </form>
 </div>
</template>
<script>
export default {
 data() {
 return {
  inAddMode: false,
  cardData: '',
 };
 },
 methods: {},
};
</script>
<style></style>

The specific functions will be constructed later.

Creating a Column Component

This final component is used to display the list of cards and also contains the AddCard component so that new cards can be created directly into the column.

Create a Column.vue file in the components directory and add the following code:

<template>
 <div class="col-md-3 card column" ref="column">
 <header class="card-header">
  <h3 class="col">Column Name</h3>
 </header>
 <div class="card-list"></div>
 </div>
</template>
<script>
export default {};
</script>
<style scoped>
div.column {
 padding: 0;
 padding-bottom: 15px;
 margin: 0 15px;
 box-shadow: 0 0 10px #cccccc;
}
div.card-list {
 padding: 0 15px;
}
header {
 margin-bottom: 10px;
}
header h3 {
 text-align: center;
}
</style>

Now that the framework of the project is set up, let's take a look at an overview of how drag and drop works in the browser.

What is the HTML5 Drag and Drop API?

The drag operation begins when the user moves the mouse over the draggable element, and then moves the element over the drag-and-drop enabled element.

By default, the only draggable HTML elements are images and links. To make other elements draggable, you need to add the draggable attribute to the element; you can also create the functionality explicitly in JavaScript by selecting the element and setting the draggable attribute to true.

After setting the draggable attribute to true on an element, you will notice that the draggable attribute is added to the element.

<!-- Making an element draggable in HTML -->
<div draggable="true">This is a draggable div in HTML</div>

<script>
// Making an element draggable in javascript
const div = document.querySelector('div');
div.draggable = true;
</script>

The purpose of a drag element is to transfer data from one part of the page to another.

For images, the data to be transferred is the image URL or its base 64 representation. If it is a link, the data transferred is the URL. You can move the link to your browser's URL bar, which will cause the browser to jump to that URL.

So, without the ability to transfer data, dragging elements is useless. Data transferred via a drag operation can be saved in the drag data store through the DataTransfer API, which provides a way to store and access data during a drag-and-drop operation.

DataTransfer provides a place to add items to be transferred via drag and drop. Data can be added to the drag data store when a drag operation begins (when the dragstart event is called), and data can only be received after the drag-and-drop operation is completed (when the drop event is called).

During the period from dragging to releasing the element, after the element is dragged and dropped, two events will be triggered on the dragged element: dragstart and dragend.

It is not possible to drag and drop draggable elements anywhere yet. As well as needing to explicitly make an element draggable, it also needs to be drop enabled.

To enable drag and drop of an element you need to listen for the dragover event and prevent the default browser action.

<!-- Make a section drop-enabled -->
<section class="section"></section>
<script>
const section = document.querySelector('.section');
section.addEventListener('dragover', (e) => {
 e.preventDefault();
});
</script>

When an element is dragged onto a drag-and-drop enabled element, the following events are fired on the drag-and-drop enabled element:

Dragenter: Fires once when an element is dragged over an element that enables drag and drop
Dragover: Fires continuously as long as the element remains over a drop-enabled element
Drop: Fired after the dragged element is dropped onto an element that has drag and drop enabled.

It is important to note that the data stored in the DataTransfer object can only be accessed when a drop event is triggered, not on a dragenter or dragover.

Assembling all components

Before we add drag and drop functionality to our components, let’s talk about app state.

Here the app state will be stored in the App component, which can then be passed down to the Column component as props. On the other hand, the column component will pass the required props to the card component when it renders.

Modify App.vue to reflect the state and component composition:

// App.vue
<template>
 <div class="container-fluid">
 <h2 class="m-5">
  Vue Kanban Board
 </h2>
 <div class="row justify-content-center">
  <Column
  v-for="(column, index) in columns"
  :column="column"
  :key="index"
  />
 </div>
 </div>
</template>
<script>
import Column from './components/Column';
export default {
 name: 'App',
 components:
 Column,
 },
 data() {
 return {
  columns: [
  {
   name: 'TO-DO',
   cards:
   {
    value: 'Prepare breakfast',
   },
   {
    value: 'Go to the market',
   },
   {
    value: 'Do the laundry',
   },
   ],
  },
  {
   name: 'In Progress',
   cards: [],
  },
  {
   name: 'Done',
   cards: [],
  },
  ],
 };
 },
};
</script>
<style>
h2 {
 text-align: center;
}
</style>

Here, we imported the column component and passed each column's data to the column component while looping through the data in the columns state. In this case, there are only three columns, "To-Do", "In Progress", and "Done", and each column has an array of cards.

Next, update the Column component to receive the props and display it:

// Column.vue
<template>
 <div class="col-md-3 card column" ref="column">
 <header class="card-header">
  <h3 class="col">{{ column.name }}</h3>
  <AddCard />
 </header>
 <div class="card-list">
  <Card v-for="(card, index) in column.cards" :key="index" :card="card" />
 </div>
 </div>
</template>
<script>
import Card from './Card';
import AddCard from './AddCard';
export default {
 name: 'Column',
 components:
 Card,
 AddCard,
 },
 props: {
 column: {
  type: Object,
  required: true,
 },
 },
};
</script>

...

The Column component receives props from the App component and uses the props to render the Card component list. The AddCard component is also used here, because it should be possible to add new cards directly to the column.

Finally, the Card component is updated to display the data received from the Column.

// Card.vue
<template>
 <div class="card" ref="card">
 <div class="card-body">{{ card.value }}</div>
 </div>
</template>
<script>
export default {
 name: 'Card',
 props: {
 card: {
  type: Object,
  required: true,
 },
 },
};
</script>

The Card component simply receives all the data it needs from the Column and displays it. We also add a reference to the card element here, which is useful when accessing the card element with JavaScript.

After completing the above steps, your application should look like this:

Adding drag and drop functionality

The first step in adding drag-and-drop functionality is to identify the draggable components and drop targets.

The user should be able to drag cards from one column to another, following the progression of activities in the card. So the draggable component should be a Card component, and the drop target is a Column component.

Make the card draggable

To make a card component draggable, you need to do the following:

Set the draggable property to true
Use the DataTransfer object to set the data to be transferred

You should set draggable to true first. According to the Vue lifecycle hook, the safe place should be the installed hook. Add the following to the mounted hook of the Card component:

// Card.vue
<script>
export default {
 name: 'Card',
 props: {...},

 mounted() {
 this.setDraggable();
 },

 methods: {
 setDraggable() {
  // Get Card element.
  const card = this.$refs.card;
  card.draggable = true;
  // Setup event listeners.
  card.addEventListener('dragstart', this.handleDragStart);
  card.addEventListener('dragend', this.handleDragEnd);
 },
 },
</script>

Above, we created a setDraggable method to make the card component draggable.

In setDraggable, get the card from the reference you added in the previous section and set the draggable property to true.

You also need to set up event listeners:

// Card.vue
<script>
export const CardDataType = 'text/x-kanban-card';

export default {
...
 methods: {
 setDraggable() {...},
 handleDragStart(event) {
  const dataTransfer = event.dataTransfer;
  // Set the data to the value of the card which is gotten from props.
  dataTransfer.setData(CardDataType, this.card.value);
  dataTransfer.effectAllowed = 'move';
  // Add visual cues to show that the card is no longer in it's position.
  event.target.style.opacity = 0.2;
 },
 handleDragEnd(event) {
  // Return the opacity to normal when the card is dropped.
  event.target.style.opacity = 1;
 }
 }
}
</script>

As mentioned earlier, data can be added to the drag data store only when the dragstart event is called. So you need to add data in the handleDragStart method.

The important information to use when setting the data is the format, which can be a string. In our case, it is set to text/x-kanban-card. Store this data format and export it, because the Column component will use it when getting the data after deleting the card.

Finally, reduce the transparency of the card to 0.2 to provide some feedback to the user that the card has actually been pulled out of its original position. After dragging is completed, restore the transparency to 1.

The cards can now be dragged. Next, add the drop target.

Set dragover to drop-enabled

When you drag a card onto a column component, a dragover event is fired immediately, and a drop event is fired once the card is dropped into the column.

To make the cards drop into the columns, you need to listen for these events.

// Column.vue
<template>...</template>
<script>
import Card { CardDataType } from './Card';
import AddCard from './AddCard';
export default {
 name: 'Column',
 components: {...},
 props: {...},
 mounted() {
 this.enableDrop();
 },
 methods: {
 enableDrop() {
  const column = this.$refs.column;
  column.addEventListener('dragenter', this.handleDragEnter);
  column.addEventListener('dragover', this.handleDragOver);
  column.addEventListener('drop', this.handleDrop);
 },
 /**
  * @param {DragEvent} event
  */
 handleDragEnter(event) {
  if (event.dataTransfer.types.includes[CardDataType]) {
  // Only handle cards.
  event.preventDefault();
  }
 },
 handleDragOver(event) {
  // Create a move effect.
  event.dataTransfer.dropEffect = 'move';
  event.preventDefault();
 },
 /**
  * @param {DragEvent} event
  */
 handleDrop(event) {
  const data = event.dataTransfer.getData(CardDataType);
  // Emit a card moved event.
  this.$emit('cardMoved', data);
 },
 },
};
</script>

This is where you'll set up any event listeners needed to enable dropping after the Column component is mounted.

Of the three events, the first to be triggered is dragenter, which is triggered immediately when the draggable element is dragged into the column. For our program, we only want to put the card into a column, so in the dragenter event, we only prevent the default value of the data type, which includes the card data type defined in the card component.

In the dragover event, set the drop effect to move.

Get the data transferred from the dataTransfer object in the drop event.

Next, you need to update the state and move the card to the current column. Because our program state is in the App component, emit the cardMoved event in the drop listener, pass the transferred data, and listen for the cardMoved event in the App component.

Update App.vue to listen for the cardMoved event:

// App.vue

<template>
 <div class="container-fluid">
 ...
 <div class="row justify-content-center">
  <Column
  v-for="(column, index) in columns"
  :column="column"
  :key="index"
  @cardMoved="moveCardToColumn($event, column)"
  />
 </div>
 </div>
</template>

<script>
import Column from './components/Column';
export default {
 name: 'App',
 components: {...},
 data() {
 return {...}
 },
 methods: {
 moveCardToColumn(data, newColumn) {
  const formerColumn = this.columns.find(column => {
  // Get all the card values in a column.
  const cardValues = column.cards.map((card) => card.value);
  return cardValues.includes(data);
  })
  // Remove card from former column.
  formerColumn.cards = formerColumn.cards.filter(
  (card) => card.value !== data
  );
  // Add card to the new column.
  newColumn.cards.push({ value: data });
 },
 },
}
</script>

Here, the cardMoved event is listened for through @cardMoved, and the moveCardToColumn method is called. The cardMoved event emits a value (the card data) which can be accessed via $event, and is also passed the current column where the card was dropped (this is where the event was dispatched).

The moveCardToColumn function does three things: finds the column where the card was previously located, removes the card from that column, and finally adds the card to the new column.

Complete the board

Now that we have implemented drag and drop functionality, the only thing left is the ability to add cards.

Add the following code to AddCard.vue:

<template>
 <div class="">
 <button
  class="btn btn-sm btn-info w-100"
  v-if="!inAddMode"
  @click="inAddMode = true"
 >
  Add Card
 </button>
 <form
  action="#"
  class="card p-3"
  @submit.prevent="handleSubmit"
  @reset="handleReset"
  ref="form"
  v-else
 >
  ...
 </form>
 </div>
</template>
<script>
export default {
 data() {
 return {...};
 },
 methods: {
 handleSubmit() {
  if (this.cardData.trim()) {
  this.cardData = '';
  this.inAddMode = false;
  this.$emit('newcard', this.cardData.trim());
  }
 },
 handleReset() {
  this.cardData = '';
  this.inAddMode = false;
 },
 },
};
</script>

The code above is the function that runs when the "add card" form is submitted or reset.

Clear cardData after reset and set inAddMode to false.

You also clear the cardData after submitting the form so that the previous data is not displayed when adding a new item, and you also set inAddMode to false and emit the newcard event.

The AddCard component is used in the Column component, so you need to listen to the newcard event in the Column component. Add code to listen to the newcard event in the Column component:

<template>
 <div class="col-md-3 card column" ref="column">
 <header class="card-header">
  <h3 class="col">{{ column.name }}</h3>
  <AddCard @newcard="$emit('newcard', $event)"></AddCard>
 </header>
 ...
</template>
...

Re-emitting the newcard event here allows it to reach the App component, where the actual action will take place.

Custom Vue events do not bubble, so the App component cannot listen to the newcard event emitted from the AddCard component because it is not a direct child component.
Update the code of the App component to handle the newcard event:

// App.vue

<template>
 <div class="container-fluid">
 ...
 <div class="row justify-content-center">
  <Column
  v-for="(column, index) in columns"
  :column="column"
  :key="index"
  @cardMoved="moveCardToColumn($event, column)"
  @newcard="handleNewCard($event, column)"
  />
 </div>
 </div>
</template>

<script>
import Column from './components/Column';
export default {
 name: 'App',
 components: {...},
 data() {
 return {...}
 },
 methods: {
 moveCardToColumn(data, newColumn) {...},
 handleNewCard(data, column) {
  // Add new card to column.
  column.cards.unshift({ value: data });
 },
 },
};
</script>

Here we listen for the newcard event called from the Column component and after getting the data, we create a new card and add it to the column where we created it.

Summarize

In this article, we introduced what HTML 5 drag and drop API is, how to use it, and how to implement it in Vue.js.

Drag and drop functionality can also be used in other front-end frameworks and native JavaScript.

The above is the details of how to use HTML 5 drag and drop API in Vue. For more information about the drag and drop API in Vue, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in:

Encapsulate axios in vue and implement unified management of api interfaces
Detailed explanation of one way to use the Composition API of vue3.0
Example of using Composition API of Vue3.0
Detailed explanation of the ideas and methods of Axios encapsulation API interface in Vue
The vue project is packaged as an APP, and the static resources are displayed normally, but the API request cannot perform data operations
vue sets the global access interface API address operation
Vue connects to the backend API and deploys it to the server
SpringBoot+Vue front-end and back-end separation to achieve cross-domain request API problem
Use the Vue Composition API to write clean, extensible form implementations
A brief introduction to the composition-api of the new version of Vue3.0 API
Summary of Vue's common APIs and advanced APIs

<<: Two ways to introduce svg icons in Vue

>>: Vue implements multi-tab component