Drag&Drop in Tables

Shopware 6 (German) Programmierung
1

Hello,

I would like to drag & drop table rows in administration. I have a plugin linked here.

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
Screentshot1839×881 85.3 KB

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!
2

I’ve found the solution:

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

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 }}

 

3

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!

4

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