Drag&Drop in Tables


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:

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');

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?


I’ve found the solution:



npm i -S vuedraggable


import draggable from 'vuedraggable'
  export default {
       components: {

Then you can use in the template:

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


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?


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