# Drag&Drop in Tables

**URL:** <https://forum.shopware.com/t/drag-drop-in-tables/68760>\
**Category:** Programmierung\
**Created:** [4. August 2020 um 12:21 UTC](https://forum.shopware.com/t/drag-drop-in-tables/68760 "2020-08-04T12:21:07Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![mbdus](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/mbdus/32/12997_2.png) [@mbdus](https://forum.shopware.com/u/mbdus)\
**Post date:** [4. August 2020 um 12:21 UTC](https://forum.shopware.com/t/drag-drop-in-tables/68760/1 "2020-08-04T12:21:07Z")

</div>

Hello,

I would like to drag & drop table rows in administration. [I have a plugin linked here.](https://www.mbdus.de/plugin/MbdusDragDrop.zip)

It doesn’t matter where the data can be drag&dropped. In my way I want to drag the data in the category in the product assignment section.

Here a screenshot for better understanding:

 ![Screentshot](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/2X/4/47dde1a2168368cba3bdab9a9f118adf444f094a.png)

I have the following code in my component “mbdus.data-grid.html.twig”:

```
In the index.js I have registered a method:

window.addEventListener('dragenter', this.onDragEnter);

And in the console I can see my output:

onDragEnter(dragData, dropData, validDrop){
     console.log('on drag enter');
     console.log(dragData);
     console.log(dragData.position);
     console.log(this.records);
     console.log(this.selection);

But this output doesn't help me. How can I change the rows? And how can I save the row positions for push them back to save them in the database?

Thanks!
```

---

<div class="post-metadata">

**Author:** ![mbdus](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/mbdus/32/12997_2.png) [@mbdus](https://forum.shopware.com/u/mbdus)\
**Post date:** [4. August 2020 um 22:36 UTC](https://forum.shopware.com/t/drag-drop-in-tables/68760/2 "2020-08-04T22:36:26Z")

</div>

I’ve found the solution:

[https://dev.to/andynoir/draggable-table-row-with-vuejs-vuetify-and-sortablejs-1o7l](https://dev.to/andynoir/draggable-table-row-with-vuejs-vuetify-and-sortablejs-1o7l)

> **[How to implement the Vue.draggable to be swappable](https://okamuuu.com/posts/2019/2019-06-15.vue-draggable-to-be-swappable.html)**
>
> Vue.draggable is very useful UI component. It is a nice tool to create draggable items and represents nice sort animations. But sometimes you might want to use a swappable component instead of sortable one. If so this article will help you perhaps.

Important:

```
npm i -S vuedraggable

```

index.js:

```
import draggable from 'vuedraggable'
  ...
  export default {
       components: {
           draggable,
       },

```

Then you can use in the template:

```
        {{ item.id }}{{ item.name }}{{ item.age }}

```

&nbsp;

---

<div class="post-metadata">

**Author:** ![mbdus](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/mbdus/32/12997_2.png) [@mbdus](https://forum.shopware.com/u/mbdus)\
**Post date:** [5. August 2020 um 07:44 UTC](https://forum.shopware.com/t/drag-drop-in-tables/68760/3 "2020-08-05T07:44:10Z")

</div>

One more question:

I have a file src/Resources/package.json:

```
{
  "name": "vuedraggable",
  "version": "2.24.0",
  "description": "draggable component for vue",
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "https://github.com/SortableJS/Vue.Draggable.git"
  },
  "private": false,
  "scripts": {
    "serve": "vue-cli-service serve ./example/main.js --open --mode local",
    "build:doc": "vue-cli-service build ./example/main.js --dest docs --mode development",
    "build": "vue-cli-service build --name vuedraggable --entry ./src/vuedraggable.js --target lib",
    "lint": "vue-cli-service lint src example",
    "prepublishOnly": "npm run lint && npm run test:unit && npm run build:doc && npm run build",
    "test:unit": "vue-cli-service test:unit --coverage",
    "test:coverage": "vue-cli-service test:unit --coverage --verbose && codecov"
  },
  "dependencies": {
    "sortablejs": "^1.10.1"
  }
}

```

But with npm install && npm build is vuedraggable not installed. I have to go into the Plugin and folder src/Resources. This is a problem when you have several Plugins and you don’t want to install all npm packages manually. Is there a better way?

Thanks!

---

<div class="post-metadata">

**Author:** ![A.S](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/a.s/32/13662_2.png) [@A.S](https://forum.shopware.com/u/A.S)\
**Post date:** [3. Juni 2021 um 07:18 UTC](https://forum.shopware.com/t/drag-drop-in-tables/68760/4 "2021-06-03T07:18:50Z")

</div>

@mbdus hey did you ever got this working with `<sw-data-grid>` templates?