vue-draggable-resizable

vue-draggable-resizable copied to clipboard

There is an error when you are dragging an element (element 1) on bottom of another element (element 2) then you right click element 2 while dragging element 1. Element 1's x and y becomes NaN and cannot be moved.

Can you provide some code please? I'm not able to recreate the issue.

Hello! I am very sorry for the late reply. I got tangled on my work. Here is my code and a video of its behavoir

<template>
  <div class="container">
    <VueDraggableResizable
      class-name-active="my-active-class"
      v-for="element in elements"
      :key="element.id"
      :x="element.x"
      :y="element.y"
      :w="200"
      :h="200"
      :resizable="false"
      @dragging="(left, top) => dragging(element.id, left, top)"
      @dragstop="(left, top) => dragstop(element.id, left, top)"
      style="border: solid 1px black"
    >
      <p>{{ element.text }}</p>
    </VueDraggableResizable>
  </div>
</template>

<script>
import VueDraggableResizable from 'vue-draggable-resizable'
import { Component, Vue } from 'nuxt-property-decorator'

@Component({
  components: {
    VueDraggableResizable
  }
})
export default class DragDrop extends Vue {
  elements = [
    {
      id: 1,
      x: 0,
      y: 0,
      text: 'Element 1'
    },
    {
      id: 2,
      x: 0,
      y: 0,
      text: 'Element 2'
    }
  ]

  dragging (id, left, top) {
    console.log({id, left, top})
  }

  dragstop (id, left, top) {
    console.log({id, left, top})
  }
}
</script>

It only happens when you right click another element while still holding an element.

Thank you!

I also have the same issue and I really need this to be fixed asap. Btw thanks for this awesome library.