Draggable table with bootstrap - draggable

Question

i would like to make the rows in the table draggable but everything i tried didnt work.
i am realy new to programming and must do the task as soon as possible:)
i am realy thankful for your help`
i read all about b-table documentation in bootstrap but it doesnt say anything about the draggable rows in a table.
<script>
import BaseSafetyModal from '#/components/Base/BaseSafetyModal';
import draggable from "vuedraggable";
export default {
components: {
'safety-modal': BaseSafetyModal,
draggable
},
props: {
fields: {
type: Array,
required: true
},
items: {
type: Array,
required: true
},
approved: {
type: Boolean,
default: false
}
},
methods: {
getModalId (item) {
let name = Object.keys(item).find(
itemKeys =>
itemKeys.indexOf('id') > -1 &&
itemKeys !== 'headline_id' &&
itemKeys !== 'revision_id' &&
itemKeys !== 'building_id'
);
if (
Object.keys(item).indexOf('geometry_id') > -1 &&
Object.keys(item).indexOf('level_id') > -1
)
name = 'level_id';
return `${name}-${item[name]}`;
},
showModal (item) {
this.$root.$emit('bv::show::modal', `safety-modal-${this.getModalId(item)}`);
},
removeItem (item) {
this.$emit('removeItem', item);
this.$root.$emit('bv::hide::modal', `safety-modal-${this.getModalId(item)}`);
}
}
};
</script>
<template>
<div>
<b-row>
<b-col>
<slot name="button1"></slot>
<b-button
v-if="$store.state.permissions.location_permission > 10 && !approved && items.length > 2"
v-b-tooltip.hover
title="Eintrag hinzufügen"
class="float-right"
variant="primary"
#click="$emit('changeMode')"
>
<font-awesome-icon icon="plus"/>
</b-button>
</b-col>
</b-row>
<b-row>
<b-col class="pt-3">
<b-table fixed outlined striped hover stacked="md" :items="items" :fields="fields">
<template v-slot:cell(actions)="row">
<div class="text-md-right float-right">
<b-button-group size="sm">
<slot :item="row.item"></slot>
<b-button
v-b-tooltip.hover
title="Bearbeiten"
v-if="$store.state.permissions.location_permission > 10 && !approved"
type="button"
variant="primary"
#click="$emit('changeMode',row.item)"
>
<font-awesome-icon icon="edit"/>
</b-button>
<b-button
#click="showModal(row.item)"
v-b-tooltip.hover
title="Löschen"
v-if="$store.state.permissions.location_permission > 10 && !approved"
type="button"
variant="danger"
>
<font-awesome-icon icon="trash"/>
</b-button>
<safety-modal
:modal-id="`safety-modal-${getModalId(row.item)}`"
#removeItem="removeItem(row.item)"
></safety-modal>
</b-button-group>
</div>
</template>
</b-table>
</b-col>
</b-row>
<b-row>
<b-col>
<slot name="button2"></slot>
<b-button
v-if="$store.state.permissions.location_permission > 10 && !approved"
v-b-tooltip.hover
title="Eintrag hinzufügen"
class="float-right"
variant="primary"
#click="$emit('changeMode')"
>
<font-awesome-icon icon="plus"/>
</b-button>
</b-col>
</b-row>
</div>
</template>
`

Answer 1

You probably gonna need some drag and drop package, such as SortableJS or vue-smooth-dnd.
Let us now!