e8-draggable
Updated on Aug 7, 2025 44 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.
{{ 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
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
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 | [] |