diff --git a/src/DragContainer.vue b/src/DragContainer.vue index 81adf9cb622966d04f10ddae9642490bdffa651e..49ee72ad09059c6ba6d2d1b4e65f5f0303212a4a 100644 --- a/src/DragContainer.vue +++ b/src/DragContainer.vue @@ -9,6 +9,8 @@ <dd>{{ x }}, {{ y }}</dd> <dt>Size</dt> <dd>{{ w }} × {{ h }}</dd> + <dt>Data</dt> + <dd>{{ data }}</dd> </dl> </div> </slot> @@ -28,6 +30,7 @@ export default { y: this.y, w: this.w, h: this.h, + data: this.data, }) ); }, @@ -38,6 +41,7 @@ export default { y: Number, w: Number, h: Number, + data: Object, }, }; </script> diff --git a/src/Grid.vue b/src/Grid.vue index 2dcf7acd8c1907525cefddd39acbf0993b2e1707..f1f6deec4f59f2a0dedb8cfda4fb626fcf869b43 100644 --- a/src/Grid.vue +++ b/src/Grid.vue @@ -15,6 +15,7 @@ :y="item.y" :w="item.w" :h="item.h" + :data="item.data" > </DragContainer> <slot></slot> @@ -127,15 +128,15 @@ export default { data() { return { items: [ - { x: 1, y: 3, w: 1, h: 1, key: "obj1" }, - { x: 2, y: 1, w: 1, h: 1, key: "obj2" }, - { x: 3, y: 1, w: 2, h: 2, key: "obj3" }, - { x: 5, y: 2, w: 1, h: 1, key: "obj4" }, - { x: 1, y: 1, w: 1, h: 2, key: "obj5" }, - { x: 2, y: 3, w: 1, h: 1, key: "obj6" }, - { x: 2, y: 2, w: 1, h: 3, key: "obj7" }, - { x: 1, y: 4, w: 1, h: 1, key: "obj8" }, - { x: 5, y: 3, w: 1, h: 1, key: "obj9" }, + { x: 1, y: 3, w: 1, h: 1, key: "obj1", data: {} }, + { x: 2, y: 1, w: 1, h: 1, key: "obj2", data: {} }, + { x: 3, y: 1, w: 2, h: 2, key: "obj3", data: {} }, + { x: 5, y: 2, w: 1, h: 1, key: "obj4", data: {} }, + { x: 1, y: 1, w: 1, h: 2, key: "obj5", data: {} }, + { x: 2, y: 3, w: 1, h: 1, key: "obj6", data: {} }, + { x: 2, y: 2, w: 1, h: 3, key: "obj7", data: {} }, + { x: 1, y: 4, w: 1, h: 1, key: "obj8", data: {} }, + { x: 5, y: 3, w: 1, h: 1, key: "obj9", data: {} }, ], }; },