How can I help you?
Drag and Drop in Vue
3 Feb 202619 minutes to read
Drag and drop is a user interface feature that lets users select an item (or items) and move them to a different location or onto another interface element by dragging with a pointing device (such as a mouse) and dropping at the desired location.
Syncfusion® Vue components support drag and drop feature through two libraries. These are Draggable and Droppable.
Draggable
The Syncfusion® Draggable library allows you to make any DOM element draggable by passing it to the Draggable constructor. This is useful for interactive UI patterns such as reordering a list by dragging items.
Example — enable draggable functionality for a specific DOM element:
<template>
<div id='container'>
<div id='element1' ref='element1'>
<p>Draggable Element </p>
</div>
</div>
</template>
<script setup>
import { Draggable } from '@syncfusion/ej2-base';
import { onMounted, ref } from 'vue';
const element1 = ref(null);
onMounted(() => {
new Draggable(element1.value, { clone: false });
})
</script>
<style>
#element1,
.helper {
height: 100px;
width: 150px;
border: 1px solid #cecece;
cursor: move;
user-select: none;
color: #6a77a7;
touch-action: none;
}
p {
padding-top: 23px;
text-align: center;
}
.helper {
opacity: 0.6;
}
.select {
border: 1px solid #cccccc;
background: #ededed;
}
</style><template>
<div id='container'>
<div id='element1'>
<p>Draggable Element </p>
</div>
</div>
</template>
<script>
import { Draggable } from '@syncfusion/ej2-base';
import Vue from "vue";
export default {
mounted: function () {
var dragElement = document.getElementById('element1');
var draggable = new Draggable(dragElement, { clone: false });
}
}
</script>
<style>
#element1,
.helper {
height: 100px;
width: 150px;
border: 1px solid #cecece;
cursor: move;
user-select: none;
color: #6a77a7;
touch-action: none;
}
p {
padding-top: 23px;
text-align: center;
}
.helper {
opacity: 0.6;
}
.select {
border: 1px solid #cccccc;
background: #ededed;
}
</style>Clone draggable element
You can create a clone of the draggable element while dragging by setting the clone property to true. Example:
<template>
<div id='container'>
<div id='element1' ref='element1'>
<p>Draggable Element </p>
</div>
</div>
</template>
<script setup>
import { Draggable } from '@syncfusion/ej2-base';
import { onMounted, ref } from 'vue';
const element1 = ref(null);
onMounted(() => {
new Draggable(element1.value, { clone: true });
})
</script>
<style>
#element1,
.helper {
height: 100px;
width: 150px;
border: 1px solid #cecece;
cursor: move;
user-select: none;
color: #6a77a7;
touch-action: none;
}
p {
padding-top: 23px;
text-align: center;
}
.helper {
opacity: 0.6;
}
.select {
border: 1px solid #cccccc;
background: #ededed;
}
</style><template>
<div id='container'>
<div id='element1'>
<p>Draggable Element </p>
</div>
</div>
</template>
<script>
import { Draggable } from '@syncfusion/ej2-base';
export default {
mounted: function () {
var dragElement = document.getElementById('element1');
var draggable = new Draggable(dragElement, { clone: true });
}
}
</script>
<style>
#element1,
.helper {
height: 100px;
width: 150px;
border: 1px solid #cecece;
cursor: move;
user-select: none;
color: #6a77a7;
touch-action: none;
}
p {
padding-top: 23px;
text-align: center;
}
.helper {
opacity: 0.6;
}
.select {
border: 1px solid #cccccc;
background: #ededed;
}
</style>Drag area
A drag area is a specific region designated for drag-and-drop operations. Specify the drag area using the dragArea property. Example:
<template>
<div id='container'>
<div id='droppable'>
<p class='drop'><span>Drag Area </span></p>
</div>
<div id='element1' ref='element1'>
<p class='drag-text'>Drag </p>
</div>
</div>
</template>
<script setup>
import { Draggable } from '@syncfusion/ej2-base';
import { onMounted, ref } from 'vue';
const element1 = ref(null)
onMounted(() => {
new Draggable(element1.value, {
clone: false, dragArea: "#droppable"
});
})
</script>
<style>
#element1 {
height: 100px;
width: 150px;
border: 1px solid #cecece;
cursor: move;
background: #cdffe3;
user-select: none;
touch-action: none;
}
#element1 p {
padding-top: 23px;
text-align: center;
}
.drop {
padding-top: 23px;
text-align: center;
}
#droppable {
margin: 5px;
line-height: 170px;
font-size: 14px;
width: 250px;
border: 1px solid #cecece;
background: #f6f6f6;
touch-action: none;
}
</style><template>
<div id='container'>
<div id='droppable'>
<p class='drop'><span>Drag Area </span></p>
</div>
<div id='element1'>
<p class='drag-text'>Drag </p>
</div>
</div>
</template>
<script>
import { Draggable, Droppable } from '@syncfusion/ej2-base';
export default {
mounted: function () {
var draggable = new Draggable(document.getElementById('element1'), {
clone: false, dragArea: "#droppable"
});
}
}
</script>
<style>
#element1 {
height: 100px;
width: 150px;
border: 1px solid #cecece;
cursor: move;
background: #cdffe3;
user-select: none;
touch-action: none;
}
#element1 p {
padding-top: 23px;
text-align: center;
}
.drop {
padding-top: 23px;
text-align: center;
}
#droppable {
margin: 5px;
line-height: 170px;
font-size: 14px;
width: 250px;
border: 1px solid #cecece;
background: #f6f6f6;
touch-action: none;
}
</style>Droppable
A droppable area is an element that can accept draggable elements. The Syncfusion® Droppable library converts any DOM element into a droppable zone.
When a draggable component is moved over a droppable component, the drop event can be triggered. The user can get details about the dropped element through the event argument. Based on the event argument, the user can append the dragged element to the target element.
Refer to the following code snippet to enable droppable zones.
<template>
<div id='container'>
<div id='droppable' ref='droppable'>
<p class='drop'><span>Drop Target </span></p>
</div>
<div id='element1' ref='element1'>
<p class='drag-text' ref="dragText">Drag </p>
</div>
</div>
</template>
<script setup>
import { Draggable, Droppable } from '@syncfusion/ej2-base';
import { onMounted, ref } from 'vue';
const element1 = ref(null);
const droppable = ref(null);
const dragText = ref(null);
onMounted(() => {
new Draggable(element1.value, {
clone: false
});
new Droppable(droppable.value, {
drop: () => {
dragText.value.textContent = 'Dropped';
}
});
})
</script>
<style>
#element1 {
height: 100px;
width: 150px;
border: 1px solid #cecece;
cursor: move;
background: #cdffe3;
user-select: none;
touch-action: none;
}
#element1 p {
padding-top: 23px;
text-align: center;
}
.drop {
padding-top: 23px;
text-align: center;
}
#droppable {
margin: 5px;
line-height: 170px;
font-size: 14px;
width: 250px;
border: 1px solid #cecece;
background: #f6f6f6;
touch-action: none;
}
</style><template>
<div id='container'>
<div id='droppable'>
<p class='drop'><span>Drop Target </span></p>
</div>
<div id='element1'>
<p class='drag-text'>Drag </p>
</div>
</div>
</template>
<script>
import { Draggable, Droppable } from '@syncfusion/ej2-base';
export default {
mounted: function () {
var draggable = new Draggable(document.getElementById('element1'), {
clone: false
});
var droppable = new Droppable(document.getElementById('droppable'), {
drop: (e) => {
e.droppedElement.querySelector('.drag-text').textContent = 'Dropped';
}
});
}
}
</script>
<style>
#element1 {
height: 100px;
width: 150px;
border: 1px solid #cecece;
cursor: move;
background: #cdffe3;
user-select: none;
touch-action: none;
}
#element1 p {
padding-top: 23px;
text-align: center;
}
.drop {
padding-top: 23px;
text-align: center;
}
#droppable {
margin: 5px;
line-height: 170px;
font-size: 14px;
width: 250px;
border: 1px solid #cecece;
background: #f6f6f6;
touch-action: none;
}
</style>