e8-draggable
Updated on Aug 7, 2025 48 minutes to readA flexible component that enables drag-and-drop sorting, grouping, and cloning of items.
Overview
e8-draggable allows users to reorder list items, drag them between groups, or clone them.
It supports events for item movement, drag start, and drag end.
Insert this code into Main or Initialization script of the form to register a global method
/*** SIMPLE ***/
E8App.$set(E8App.vars, 'simple', [
{
'name': 'Michael',
'id': 5
},
{
'name': 'Olivia',
'id': 7
},
{
'name': 'Noah',
'id': 6
},
{
'name': 'Charlotte',
'id': 8
}
]);
E8App.$set(E8App.vars, 'simpleDisabled', false);
/*** TWO LISTS ***/
E8App.$set(E8App.vars, 'twoLists1', [
{
'name': 'Liam',
'id': 1
},
{
'name': 'Noah',
'id': 2
},
{
'name': 'Oliver',
'id': 3
},
{
'name': 'Elijah',
'id': 4
}
]);
E8App.$set(E8App.vars, 'twoLists2', [
{
'name': 'Olivia',
'id': 5
},
{
'name': 'Emma',
'id': 6
},
{
'name': 'Ava',
'id': 7
},
{
'name': 'Charlotte',
'id': 8
}
]);
/*** CLONE ***/
E8App.$set(E8App.vars, 'clone1', [
{
'name': 'Liam',
'id': 1
},
{
'name': 'Noah',
'id': 2
},
{
'name': 'Oliver',
'id': 3
},
{
'name': 'Elijah',
'id': 4
}
]);
E8App.$set(E8App.vars, 'clone2', []);
/*** HANDLE ***/
E8App.$set(E8App.vars, 'handle', [
{
'name': 'Michael',
'id': 5
},
{
'name': 'Olivia',
'id': 7
},
{
'name': 'Noah',
'id': 6
},
{
'name': 'Charlotte',
'id': 8
}
]);
/*** TABLE ***/
E8App.$set(E8App.vars, 'table', [
{ id: 1, name: 'Abby', sport: 'basket' },
{ id: 2, name: 'Brooke', sport: 'foot' },
{ id: 3, name: 'Courtenay', sport: 'volley' },
{ id: 4, name: 'David', sport: 'rugby' }
]);
/*** TABLE COLUMNS ***/
E8App.$set(E8App.vars, 'tableColumnsHeaders', ['id', 'name', 'sport']);
E8App.$set(E8App.vars, 'tableColumns', [
{ id: 1, name: 'Abby', sport: 'basket' },
{ id: 2, name: 'Brooke', sport: 'foot' },
{ id: 3, name: 'Courtenay', sport: 'volley' },
{ id: 4, name: 'David', sport: 'rugby' }
]);
/*** NESTED ***/
E8App.$set(E8App.vars, 'nested', [
{ id: 1, name: 'Abby', items: [{ id: 1, name: 'apple' }, { id: 2, name: 'orange' }, { id: 3, name: 'pear' }] },
{ id: 2, name: 'Brooke', items: [{ id: 11, name: 'smartphone' }, { id: 12, name: 'personal computer' }] },
{ id: 3, name: 'Courtenay', items: [{ id: 21, name: 'car' }, { id: 22, name: 'house' }, { id: 23, name: 'yacht' }] },
{ id: 4, name: 'David', items: [] }
]);
/*** FOOTER SLOT ***/
E8App.$set(E8App.vars, 'slots', [
{
'name': 'Michael',
'id': 5
},
{
'name': 'Olivia',
'id': 7
},
{
'name': 'Noah',
'id': 6
},
{
'name': 'Charlotte',
'id': 8
}
]);
🔽 Show more
Copy this snippet into the Content section
<e8-tabs>
<e8-tab title="Simple">
<div>
<e8-form-checkbox
label="Disabled"
v-model="vars.simpleDisabled"
></e8-form-checkbox>
<e8-draggable
v-model="vars.simple"
:disabled="vars.simpleDisabled"
>
<div
class="list-group-item"
v-for="element in vars.simple"
:key="element.name"
>
{{ element.name }}
</div>
</e8-draggable>
</div>
</e8-tab>
<e8-tab title="Two lists">
<div>
<e8-row>
<e8-col>
<e8-draggable
v-model="vars.twoLists1"
group="people"
>
<div
class="list-group-item"
v-for="element in vars.twoLists1"
:key="element.name"
>
{{ element.name }}
</div>
</e8-draggable>
</e8-col>
<e8-col>
<e8-draggable
v-model="vars.twoLists2"
group="people"
>
<div
class="list-group-item"
v-for="element in vars.twoLists2"
:key="element.name"
>
{{ element.name }}
</div>
</e8-draggable>
</e8-col>
</e8-row>
</div>
</e8-tab>
<e8-tab title="Clone">
<div>
<e8-row>
<e8-col>
<h4>Copy from</h4>
<e8-draggable
v-model="vars.clone1"
group="people"
:cloneable="true"
:droppable="false"
>
<div
class="list-group-item"
v-for="element in vars.clone1"
:key="element.name"
>
{{ element.name }}
</div>
</e8-draggable>
</e8-col>
<e8-col>
<h4>Copy to</h4>
<e8-draggable
v-model="vars.clone2"
group="people"
style="min-height:50px"
>
<div
class="list-group-item"
v-for="element in vars.clone2"
:key="element.name"
>
{{ element.name }}
</div>
</e8-draggable>
</e8-col>
</e8-row>
</div>
</e8-tab>
<e8-tab title="Handle">
<div>
<e8-draggable
v-model="vars.handle"
handle=".my-handle"
>
<div
class="list-group-item"
v-for="element in vars.handle"
:key="element.name"
>
<e8-icon
name="list"
class="my-handle"
></e8-icon>
<span>{{ element.name }}</span>
</div>
</e8-draggable>
</div>
</e8-tab>
<e8-tab title="Table">
<div>
<table class="table table-striped">
<thead class="thead-dark">
<tr>
<th scope="col">Id</th>
<th scope="col">Name</th>
<th scope="col">Sport</th>
</tr>
</thead>
<tbody
is="e8-draggable"
v-model="vars.table"
tag="tbody"
>
<tr
v-for="item in vars.table"
:key="item.name"
>
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.sport }}</td>
</tr>
</tbody>
</table>
</div>
</e8-tab>
<e8-tab title="Table Column">
<div>
<table class="table table-striped">
<thead class="thead-dark">
<tr
is="e8-draggable"
v-model="vars.tableColumnsHeaders"
tag="tr"
>
<th
v-for="header in vars.tableColumnsHeaders"
:key="header"
scope="col"
>
{{ header }}
</th>
</tr>
</thead>
<tbody>
<tr
v-for="item in vars.tableColumns"
:key="item.name"
>
<td
v-for="header in vars.tableColumnsHeaders"
:key="header"
>
{{ item[header] }}
</td>
</tr>
</tbody>
</table>
</div>
</e8-tab>
<e8-tab title="Nested">
<div>
<e8-draggable v-model="vars.nested">
<div
class="list-group-item"
v-for="element in vars.nested"
:key="element.name"
>
<h4>{{ element.name }}</h4>
<div class="ml-2">
<e8-draggable
v-model="element.items"
group="nested-items"
>
<div
class="list-group-item"
v-for="item in element.items"
:key="item.name"
>
{{ item.name }}
</div>
</e8-draggable>
</div>
</div>
</e8-draggable>
</div>
</e8-tab>
<e8-tab title="Slots">
<div>
<e8-draggable
v-model="vars.slots"
class="list-group"
container=".item"
>
<div
class="list-group-item item"
v-for="element in vars.slots"
:key="element.name"
>
{{ element.name }}
</div>
<template #header>
<div class="list-group-item">
<h5>Header</h5>
</div>
</template>
<template #footer>
<div
class="btn-group list-group-item"
role="group"
aria-label="Basic example"
key="footer"
>
<e8-button variant="secondary">Add</e8-button>
<e8-button variant="secondary">Replace</e8-button>
</div>
</template>
</e8-draggable>
</div>
</e8-tab>
</e8-tabs>
🔽 Show more
{{ element.name }}
{{ element.name }}
{{ element.name }}
Copy from
{{ element.name }}
Copy to
{{ element.name }}
| Id | Name | Sport |
|---|---|---|
| {{ item.id }} | {{ item.name }} | {{ item.sport }} |
| {{ header }} |
|---|
| {{ item[header] }} |
{{ element.name }}
{{ item.name }}
{{ element.name }}
Header
Properties
| Property | Description | Type | Default |
|---|---|---|---|
| clone-on-ctrl | Enables item cloning when holding the Ctrl key. | boolean | false |
| cloneable | Allows items to be cloned when dragged between groups. | boolean | false |
| container | CSS selector defining which elements inside can be draggable. | string | '>*' |
| disabled | Disables all drag-and-drop operations. | boolean | false |
| droppable | Enables or disables dropping items into this container. | boolean | true |
| group | Name or object defining draggable group behavior. | string / object | — |
| handle | CSS selector for the drag handle element. | string | — |
| sortable | Allows reordering within the same container. | boolean | true |
| tag | HTML tag for the container element. | string | 'div' |
| v-model | Array of draggable items. | array | [] |
Slots
| Slot | Description |
|---|---|
| default | The main draggable content. Usually a list of items. |
| footer | Optional footer section displayed after all items. |
| header | Optional header section displayed before all items. |