vue-drag-resize

vue-drag-resize copied to clipboard

I'm adding vue-drag-resize components dynamically (v-for). In order to persist the positioning, I need to know which element was just moved or resized. I can't see any data in the eventhandler parameter object which would help identify a specific component, the parameter only contains the coordinates and size.

This would do it...

rect() { return { id: this.$el.id, left: Math.round(this.left), top: Math.round(this.top), width: Math.round(this.width), height: Math.round(this.height) }; }

Why do you need that in the component data? Vue is able to call methods with user-specified arguments as event handlers. Take this for example:

<template>
  <VueDragResize v-for="(rect, index) in rects"
    :key="index"
    :w="rect.width"
    :h="rect.height"
    :x="rect.left"
    :y="rect.top"
    @dragstop="onDragStop($event, index)"
  >
    <p>Hello World!</p>
  </VueDragResize>
</template>

<script>
import VueDragResize from '../components/vue-drag-resize.vue';

export default {
  components: {
    VueDragResize
  },
  data() {
    return {
      // your dynamic components rect data...
      rects: [
        {
          w: 200,
          h: 100,
          x: 10,
          y: 10,
        },
        {
          w: 200,
          h: 100,
          x: 300,
          y: 150,
        },
        {
          w: 200,
          h: 100,
          x: 50,
          y: 280,
        },
      ]
    };
  },
  methods: {
    onDragStop(rect, index) {
      console.log(rect);   // rect event data
      console.log(index);  // custom data -> index of element
    }
  }
};
</script>