Solution for dragging table rows with Dragula #7842

ynnsnr · 2024-09-18T10:04:12Z

ynnsnr
Sep 18, 2024

I wanted to post it in this old issue but it's closed: #5897
This is my current package.json:

{
  "devDependencies": {
    "@ant-design-vue/nuxt": "^1.4.2",
    "nuxt": "^3.11.2",
    "vue": "^3.4.34"
  },
  "dependencies": {
    "ant-design-vue": "^4.2.3",
    "dragula": "^3.7.3",
  }
}

// nuxt.config.ts
vite: {
  // https://github.com/bevacqua/dragula/issues/602
  define: {
    global: 'window'
  }
},

// plugins/dragula.client.js
import dragula from 'dragula'
import 'dragula/dist/dragula.css'

export default defineNuxtPlugin(() => {
  return {
    provide: {
      dragula: dragula,
    },
  }
})

mounted() {
  const { $dragula } = useNuxtApp()
  const tableElement = document.querySelector('table tbody')

  $dragula([tableElement], {
    moves: function (el, container, handle) {
      return handle.classList.contains('handle')
    },
  }).on('dragend', (el, target, source, sibling) => {
    // Handle row reordering
    console.log('Row dropped:', el)
  })
},

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Solution for dragging table rows with Dragula #7842

Uh oh!

{{title}}

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Uh oh!

Solution for dragging table rows with Dragula #7842

Uh oh!

ynnsnr Sep 18, 2024

Replies: 0 comments

ynnsnr
Sep 18, 2024