How to distinguish between multiple components in event handler about vue-draggable-resizable HOT 4 CLOSED

Don't you attach the event handler to a vue-draggable-resizable? If you do that, you should automatically know which component got resized and can pass that to your event handling function.

from vue-draggable-resizable.

@ScorpioX you can use function composition to achieve your purpose. Take a look at this example.

<template>
  <div id="app">
    <div style="height: 500px; width: 500px; margin: 20px; 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" style="border: 1px solid" @resizing="(left, top, width, height) => onResizing(element.id, left, top, width, height)">
          <p>{{ element.id }}</p>
        </vue-draggable-resizable>
      </template>
    </div>
    <button @click="change">Cambia posizione</button>
  </div>
</template>

export default {
  data () {
    return {
      elements: [
        {
          id: 'one',
          x: 0,
          y: 0
        },
        {
          id: 'two',
          x: 100,
          y: 0
        },
        {
          id: 'three',
          x: 0,
          y: 100
        }
      ]
    }
  },
  methods: {
    onResizing (id, left, top, width, height) {
      console.log(id, left, top, width, height)
    }
  }
}

from vue-draggable-resizable.

@mauricius I've made a quick and dirty hack of your original version here which uses a cfg object to simplify props and params exchange without events. It's for an PowerPoint like editor which shall support dozens of objects with lots defaults (parent, resizable, e.g.) pre-set.

Anyway, thanks a lot for your brilliant work without which our project would not be possible. Drop me a note anytime in case you need further details on my project 8>

from vue-draggable-resizable.

Anyway, thanks a lot for your brilliant work without which our project would not be possible. Drop me a note anytime in case you need further details on my project 8>

Sure! I would love to see where the component is used. Feel free to ping me when you have something available. Thanks!

from vue-draggable-resizable.