draggable-vue-directive - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

dist/draggable.d.ts

@@ -1,2 +0,3 @@
-export declare type HandleType = any | HTMLElement;
+import Vue from "Vue";
+export declare type HandleType = Vue | HTMLElement;
 export interface Position {
@@ -12,2 +13,3 @@ x: number;
     boundingRect?: ClientRect;
+    initialPosition?: Position;
 }
@@ -14,0 +16,0 @@ export interface DraggableBindings {

dist/draggable.js

@@ -10,10 +10,4 @@ "use strict";
 };
-Object.defineProperty(exports, "__esModule", { value: true });
 function extractHandle(handle) {
-    if (handle && handle.$el) {
-        return handle.$el;
-    }
-    else {
-        return handle;
-    }
+    return handle && handle.$el || handle;
 }
@@ -90,6 +84,7 @@ function isInBoundries(elementRect, boundingRect, dx, dy) {
         function getInitState() {
+            var startPosition = binding && binding.value && binding.value.initialPosition ? binding.value.initialPosition : { x: 0, y: 0 };
             return {
-                startPosition: { x: 0, y: 0 },
+                startPosition: startPosition,
                 initialMousePos: { x: 0, y: 0 },
-                lastPos: { x: 0, y: 0 }
+                lastPos: startPosition
             };
@@ -99,4 +94,5 @@ }
             if (binding && binding.value && binding.value.resetInitialPos) {
-                el.style.transform = "translate(0px, 0px)";
                 setState(getInitState());
+                var state = getState();
+                el.style.transform = "translate(" + state.lastPos.x + "px, " + state.lastPos.y + "px)";
                 onPositionChanged();
@@ -126,2 +122,1 @@ }
 };
-//# sourceMappingURL=draggable.js.map

dist/index.js

 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
 var draggable_1 = require("./draggable");
 exports.Draggable = draggable_1.Draggable;
-//# sourceMappingURL=index.js.map

package.json

 {
   "name": "draggable-vue-directive",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "A simple directive to handle drag and drop of any Vue component",
@@ -16,2 +16,3 @@ "main": "dist/index.js",
     "drag-and-drop",
+    "moveable",
     "typescript",
@@ -31,3 +32,6 @@ "library",
   "homepage": "https://github.com//IsraelZablianov/draggable-vue-directive#readme",
-  "dependencies": {}
+  "dependencies": {},
+  "devDependencies": {
+    "vue": "^2.5.13"
+  }
 }

README.md

@@ -12,6 +12,6 @@ <h1 align="center">draggable-vue-directive</h1>
 
-Vue directive (Vue.js 2.0) for handling element drag & drop.
+Vue directive (Vue.js 2.x) for handling element drag & drop.
 
 
-## Getting Started
+## Installation
 
@@ -26,3 +26,5 @@ ```console
 
+The live demo can be found in https://israelzablianov.github.io/draggable-demo
 
+
 ### Typical use:
@@ -65,3 +67,5 @@ ``` html
                 handleId: "handle-id",
-                draggableValue: { };
+                draggableValue: {
+                    handle: undefined
+                };
             }
@@ -75,5 +79,5 @@ },
 
-### draggable Value 
-The Object passed to the directive is called the directive value.<br>
-For example in `v-draggable="draggableValue"` draggableValue can be an object containing the folowing fields <br>
+### draggable Value
+The object passed to the directive is called the directive value.<br>
+For example in `v-draggable="draggableValue"` draggableValue can be an object containing the folowing fields: <br>
 
@@ -83,2 +87,3 @@ * [handle](#handle)
 * [resetInitialPos](#resetinitialpos)
+* [initialPosition](#initialPosition)
 * [stopDragging](#stopdragging)
@@ -114,10 +119,7 @@ * [boundingRect](#boundingrect)
             return {
-                handleId: "handle-id",
-                draggableValue: { };
+                draggableValue: {
+                    onPositionChange: this.onPosChanged
+                };
             }
         },
-        mounted() {
-            this.draggableValue.handle = this.$refs[this.handleId];
-            this.draggableValue.onPositionChange = this.onPosChanged;
-        },
         methods: {
@@ -140,3 +142,10 @@ onPosChanged: function(pos) {
 
+#### initialPosition
+Type: `Position`<br>
+Required: `false`<br>
+default: `undefined`<br>
 
+Sets the absolute starting position of this element.<br>
+Will be applied when resetInitialPos is true.
+
 #### stopDragging
@@ -155,2 +164,2 @@ Type: `Boolean`<br>
 
-Constrains dragging to within the bounds of the rectangle.
+Constrains dragging to within the bounds of the rectangle.

No alert changes

Improved metrics

Total package byte prevSize

17325

increased by2.27%

Number of lines in readme file

158

increased by6.76%

Worsened metrics

Dev dependency count

1

increased byInfinity%

Lines of code

143

decreased by-2.05%

No dependency changes