vue-smooth-dnd

[zeppelinexpress]

I’m trying to implement vue-smooth-dnd, in official docs has 2 imports:
import { Container, Draggable } from “vue-smooth-dnd”;
import { applyDrag, generateItems } from “./utils”;

this applyDrag looks nice but I don’t know how I call it to use

anyway I tried to do it myself:

<template>
  <q-layout>
    <q-page-container>
      <q-page>
        <Container @drop="onDrop">
          <Draggable v-for="item in items" :key="item.id">
            <div class="draggable-item">
              {{item.data}}
            </div>
          </Draggable>
        </Container>
      </q-page>
    </q-page-container>
  </q-layout>
</template>

<script>
import { Container, Draggable } from 'vue-smooth-dnd'
export default {
  components: { Container, Draggable },
  data () {
    return {
      items: [{ id: 1, data: 'Dragable ' + 1 }, { id: 2, data: 'Draggable ' + 2 }, { id: 3, data: 'Dragggable ' + 3 }, { id: 4, data: 'Draggggable ' + 4 }]
    }
  },
  methods: {
    onDrop (dropResult) {
      this.items = this.applyDrag(this.items, dropResult)
    },
    applyDrag (array, drop) {
      const arrayTemp = array
      const tempRemoved = arrayTemp[drop.removedIndex]
      arrayTemp[drop.removedIndex] = arrayTemp[drop.addedIndex]
      arrayTemp[drop.addedIndex] = tempRemoved
      return arrayTemp
    }
  }
}
</script>

gif what happens

[s.molinari]

Look at the applyDrag here: https://github.com/kutlugsahin/vue-smooth-dnd/blob/master/demo/src/utils/helpers.js

Scott

[zeppelinexpress]

@s-molinari
Thank you Scott! worked fine

I pasted in my code like the code:

applyDrag (arr, dragResult) {
      const { removedIndex, addedIndex, payload } = dragResult
      if (removedIndex === null && addedIndex === null) return arr

      const result = [...arr]
      let itemToAdd = payload

      if (removedIndex !== null) {
        itemToAdd = result.splice(removedIndex, 1)[0]
      }

      if (addedIndex !== null) {
        result.splice(addedIndex, 0, itemToAdd)
      }

      return result
    }

if possible I wish to know what I did wrong that mine didn’t work… didactic purposes.

[s.molinari]

Sorry, I didn’t look into your code deep enough, so can’t say what is wrong. At best, had you done a working example (or a broken one) I would have taken a bit more time to look.

Scott

[zeppelinexpress]

thanks anyway