Drag and Drop in Vue

28 Jun 202419 minutes to read

Drag and drop is a feature of a user interface that allows users to select an item or items and then move them to a different location or onto another interface element by “dragging” the selected item(s) with a pointing device (such as a mouse) and then “dropping” them at the desired location.

Syncfusion Vue components support drag and drop feature through two libraries. These are Draggable and Droppable.

Draggable

The Syncfusion’s Draggable library allows users to make any DOM element draggable by passing it as a parameter to the Draggable constructor. This can be useful for creating interactive and user-friendly interfaces, such as allowing a user to reorder items in a list by dragging them. The below code snippet enables the draggable functionality for the specific DOM element passed to the Draggable constructor.

<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

Syncfusion provides the option to create a clone of a draggable element while the user is dragging it. It can be achieved by setting the clone property to true. Here’s an example of how to create a clone of a draggable 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: 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 area within a user interface that is designated for drag and drop operations. When an object or element is dragged within a drag area, certain actions or events may be triggered. The user can specify the drag area by using the dragArea property. Refer to the below sample.

<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

Droppable component refers to an area of a user interface that can receive a draggable component that is being moved by a user. Syncfusion’s Droppable library converts any DOM element into a droppable zone, which accepts draggable elements.

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>

See also

Define handle element for draggable

Restricting draggable within container

Visual feedback of draggable element

Accepting specific drag element in droppable