Added props parentW & parentH

Added props: parentW & parentH
see documentation and demo

README.md

@@ -113,6 +113,30 @@ If the prop is enabled, the component is oriented only to the specified.
 <vue-drag-resize :isActive="true">
 ```
 
+#### parentW
+Type: `Number`<br>
+Required: `false`<br>
+Default: `0`
+
+Define the initial width of the parent element. If not specified it calculated automatically.
+With this parameter, you can set the bounding area for the component, and also it is used when resizing in real time.
+
+```html
+<vue-drag-resize :w="200">
+```
+
+#### parentH
+Type: `Number`<br>
+Required: `false`<br>
+Default: `0`
+
+Define the initial height of the parent element. If not specified it calculated automatically.
+With this parameter, you can set the bounding area for the component, and also it is used when resizing in real time.
+
+```html
+<vue-drag-resize :w="200">
+```
+
 #### isDraggable
 Type: `Boolean`<br>
 Required: `false`<br>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-drag-resize",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "Vue Component for resize and drag elements",
   "author": "Kirill Murashov <[email protected]>",
   "main": "dist/index.js",

src/components/vue-drag-resize.js

@@ -19,6 +19,20 @@ export default {
         parentLimitation: {
             type: Boolean, default: true
         },
+        parentW: {
+            type: Number,
+            default: 0,
+            validator: function (val) {
+                return val >= 0
+            }
+        },
+        parentH: {
+            type: Number,
+            default: 0,
+            validator: function (val) {
+                return val >= 0
+            }
+        },
         w: {
             type: Number,
             default: 100,
@@ -127,9 +141,9 @@ export default {
 
     mounted: function () {
         this.parentElement = this.$el.parentNode;
+        this.parentWidth = this.parentW ? this.parentW : this.parentElement.clientWidth;
+        this.parentHeight = this.parentH ? this.parentH : this.parentElement.clientHeight;
 
-        this.parentWidth = this.parentElement.clientWidth;
-        this.parentHeight = this.parentElement.clientHeight;
         this.rawRight = this.parentWidth - this.rawWidth - this.rawLeft;
         this.rawBottom = this.parentHeight - this.rawHeight - this.rawTop;
 
@@ -692,6 +706,18 @@ export default {
 
             let delta = this.height- this.h;
             this.rawBottom = this.bottom + delta;
+        },
+
+        parentW(val){
+            this.right = val - this.width - this.left;
+            this.parentWidth = val;
+
+        },
+
+        parentH(val){
+            this.bottom = val - this.height - this.top;
+            this.parentHeight = val;
+
         }
     }
 }

src/demo/app.vue

@@ -1,11 +1,13 @@
 <template>
     <div id="app">
-        <div class="list">
+        <div class="list" id="list">
             <VueDragResize v-for="(rect, index) in rects"
                            :w="rect.width"
                            :h="rect.height"
                            :x="rect.left"
                            :y="rect.top"
+                           :parentW="listWidth"
+                           :parentH="listHeight"
                            :axis="rect.axis"
                            :isActive="rect.active"
                            :minw="rect.minw"
@@ -75,7 +77,22 @@
             toolbar
         },
 
+        data(){
+            return {
+                listWidth: 0,
+                listHeight: 0
+            }
+        },
+
         mounted() {
+            let listEl = document.getElementById('list');
+            this.listWidth = listEl.clientWidth;
+            this.listHeight = listEl.clientHeight;
+
+            window.addEventListener('resize', ()=>{
+                this.listWidth = listEl.clientWidth;
+                this.listHeight = listEl.clientHeight;
+            })
         },
 
         computed: {