11<template >
2- <div v-el: item
2+ <div ref = " item"
33 class =" vue-grid-item"
44 :class =" { 'vue-resizable' : isResizable, 'resizing' : isResizing, 'vue-draggable-dragging' : isDragging, 'cssTransforms' : useCssTransforms }"
55 :style =" style"
66 >
77 <slot ></slot >
8- <!-- <pre>
9- x: {{ x | json}}
10- y: {{ y | json}}
11- w: {{ w | json}}
12- h: {{ h | json}}
13- </pre>-->
14- <span v-if =" isResizable" v-el:handle class =" vue-resizable-handle" span >
8+ <span v-if =" isResizable" ref =" handle" class =" vue-resizable-handle" span >
159 </div >
1610</template >
1711<style >
6256<script >
6357 import {setTopLeft , setTransform , createMarkup , getLayoutItem } from ' ./utils'
6458 import {getControlPosition , offsetXYFromParentOf , createCoreData } from ' ./draggableUtils'
59+ import eventBus from ' ./eventBus'
6560
6661 var interact = require (" interact.js"
6762
169164 style: {}
170165 }
171166 },
172- ready : function () {
173- this .cols = this .$parent .colNum ;
174- this .rowHeight = this .$parent .rowHeight ;
175- this .margin = this .$parent .margin ;
176- this .maxRows = this .$parent .maxRows ;
177- this .isDraggable = this .$parent .isDraggable ;
178- this .isResizable = this .$parent .isResizable ;
179- this .useCssTransforms = this .$parent .useCssTransforms ;
180- this .createStyle ();
181-
182- var self = this ;
183- if (this .isDraggable ) {
184- if (this .interactObj == null ) {
185- this .interactObj = interact (this .$els .item );
186- }
187- this .interactObj
167+ created () {
168+ eventBus .$on (' updateWidth' function (width ) {
169+ this .updateWidth (width);
170+ });
171+ eventBus .$on (' compact' function (layout ) {
172+ this .compact (layout);
173+ });
174+ },
175+ mounted : function () {
176+ // this.$nextTick(function () {
177+ this .cols = this .$parent .colNum ;
178+ this .rowHeight = this .$parent .rowHeight ;
179+ this .margin = this .$parent .margin !== undefined ? this .$parent .margin : [10 , 10 ];
180+ this .maxRows = this .$parent .maxRows ;
181+ this .isDraggable = this .$parent .isDraggable ;
182+ this .isResizable = this .$parent .isResizable ;
183+ this .useCssTransforms = this .$parent .useCssTransforms ;
184+ this .createStyle ();
185+
186+ var self = this ;
187+ if (this .isDraggable ) {
188+ if (this .interactObj == null ) {
189+ this .interactObj = interact (this .$refs .item );
190+ }
191+ this .interactObj
188192 .draggable ({
189193 })
190194 .on (' dragstart dragmove dragend' function (event ) {
191195 self .handleDrag (event );
192196 });
193- }
194- if (this .isResizable ) {
195- if (this .interactObj == null ) {
196- this .interactObj = interact (this .$els .item );
197197 }
198- this .interactObj
198+ if (this .isResizable ) {
199+ if (this .interactObj == null ) {
200+ this .interactObj = interact (this .$refs .item );
201+ }
202+ this .interactObj
199203 .resizable ({
200204 preserveAspectRatio: false ,
201205 edges: {left: false , right: true , bottom: true , top: false }
202206 })
203207 .on (' resizestart resizemove resizeend' function (event ) {
204208 self .handleResize (event );
205209 });
206- }
210+ }
211+ // });
207212 },
208213 watch: {
209214 cols : function () {
331336 this .lastW = x;
332337 this .lastH = y;
333338
334- this .$dispatch ( " resizeEvent" , event .type , this .i , this .x , this .y , this .h , this .w );
339+ this .$parent . resizeEvent ( event .type , this .i , this .x , this .y , this .h , this .w );
335340 },
336341 handleDrag (event ) {
337342 if (this .isResizing ) return ;
385390 this .lastX = x;
386391 this .lastY = y;
387392
388- this .$dispatch ( " dragEvent" , event .type , this .i , this .x , this .y , this .w , this .h );
393+ this .$parent . dragEvent ( event .type , this .i , this .x , this .y , this .w , this .h );
389394 },
390395 calcPosition : function (x , y , w , h ) {
391396 const colWidth = this .calcColWidth ();
453458 w = Math .max (Math .min (w, this .cols - this .x ), 0 );
454459 h = Math .max (Math .min (h, this .maxRows - this .y ), 0 );
455460 return {w, h};
461+ },
462+ updateWidth : function (width , colNum ) {
463+ this .containerWidth = width;
464+ if (colNum !== undefined && colNum !== null ) {
465+ this .cols = colNum;
466+ }
467+ },
468+ compact : function (layout ) {
469+ var l = getLayoutItem (layout, this .i );
470+ if (l !== undefined && l !== null ) {
471+ this .x = l .x ;
472+ this .y = l .y ;
473+ this .h = l .h ;
474+ this .w = l .w ;
475+ }
476+ this .createStyle ();
456477 }
457478 },
458- events: {
479+ /* events: {
459480 updateWidth: function(width, colNum) {
460481 this.containerWidth = width;
461482 if (colNum !== undefined && colNum !== null) {
472493 }
473494 this.createStyle();
474495 }
475- }
496+ }*/
476497 }
477498script >
0 commit comments