Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Draggables "pile down" if constructed using v-for

See original GitHub issue

When I want to generate multiple draggables within one parent div using the v-for directive, the domain in which they can move in the y-direction piles up from the space in the y-direction, their predecessors are using.

So for example if the first element constructed using v-for has a size of (100, 100) and the second element is supposed to appear at (0,0), it appears at (0, 100) of the parent component but thinks, it is at (0, 0). As a consequence it can be moved down to y=(600-own height), even if the domain is only supposed to have a size of 500. Interestingly, this piling only occurs in the y-direction but not in the x-direction. I don’t know whether the issue becomes clear in my description, so here is some example code.

<template>
<div id="app" class="container">
  <div style="height: 500px; width: 500px; border: 1px solid red; position: relative;">
    <template v-for="element in elements">
      <vue-draggable-resizable :parent="true" :resizable="true" :x="element.x" :y="element.y" @dragstop="(x,y) => updateElementPosition(element, x, y)" style="border: 1px solid">
        <p>{{ element.text }}</p>
        <p>x-position: {{ element.x }} y-position: {{ element.y }}</p>
      </vue-draggable-resizable>
    </template>
  </div>
</div>
</template>

<script>
import VueDraggableResizable from 'vue-draggable-resizable'

export default {
  name: 'app',
  components: {
    VueDraggableResizable
  },
  data () {
    return {
      elements: [
        {
          text: 'I can be moved around freely within the parent',
          x: 0,
          y: 0
        },
        {
          text: 'My initial position is set to 0,0 but I appear below the previous element at 0, 200 and can be moved further down than the border of my parent',
          x: 0,
          y: 0
        },
        {
          text: 'I appear below the lower end of my predecessor. If the size of one of them is changed, I move accordingly without changing my coordinates',
          x: 0,
          y: 0
        }
      ]
    }
  },
  methods: {
    updateElementPosition (element, x, y) {
      element.x = x
      element.y = y
    }
  }
}
</script>

I’m using vue-draggable-resizable 1.2.2 and Vue 2.3.4