draggable-vue-directive - npm Package Compare versions

Comparing version 1.0.3 to 1.1.0

dist/draggable.d.ts

@@ -11,2 +11,3 @@ export declare type HandleType = any | HTMLElement;
     stopDragging?: boolean;
+    boundingRect?: ClientRect;
 }
@@ -13,0 +14,0 @@ export interface DraggableBindings {

dist/draggable.js

@@ -19,2 +19,23 @@ "use strict";
 }
+function isInBoundries(elementRect, boundingRect, dx, dy) {
+    if (dx === void 0) { dx = 0; }
+    if (dy === void 0) { dy = 0; }
+    if (boundingRect && elementRect) {
+        var actualMaxTop = elementRect.top + elementRect.height + dy;
+        var maxTop = boundingRect.bottom;
+        var actualMinTop = elementRect.top + dy;
+        var minTop = boundingRect.top;
+        var actualMaxLeft = elementRect.left + dx;
+        var maxLeft = boundingRect.right - elementRect.width;
+        var actualMinLeft = elementRect.left + dx;
+        var minLeft = boundingRect.left;
+        if ((actualMaxTop > maxTop && actualMaxTop - dy > maxTop) ||
+            (actualMinTop < minTop && actualMinTop - dy < minTop) ||
+            (actualMaxLeft > maxLeft && actualMaxLeft - dx > maxLeft) ||
+            (actualMinLeft < minLeft && actualMinLeft - dx < minLeft)) {
+            return false;
+        }
+    }
+    return true;
+}
 exports.Draggable = {
@@ -29,3 +50,2 @@ bind: function (el, binding) {
         var handler = (binding.value && binding.value.handle && extractHandle(binding.value.handle)) || el;
-        var safeDistance = 5;
         init(binding);
@@ -37,6 +57,6 @@ function mouseMove(event) {
             var dy = event.clientY - state.initialMousePos.y;
-            if (el.scrollHeight + event.clientY > window.innerHeight - safeDistance ||
-                event.clientY - safeDistance < 0 ||
-                el.scrollWidth + event.clientX > window.innerWidth - safeDistance ||
-                event.clientX - el.scrollWidth < safeDistance) {
+            var boundingRect = binding.value && binding.value.boundingRect;
+            var stopDragging = binding.value && binding.value.stopDragging;
+            var elementRect = el.getBoundingClientRect();
+            if (!isInBoundries(elementRect, boundingRect, dx, dy) || stopDragging) {
                 return;
@@ -106,1 +126,2 @@ }
 };
+//# sourceMappingURL=draggable.js.map

dist/index.js

@@ -5,1 +5,2 @@ "use strict";
 exports.Draggable = draggable_1.Draggable;
+//# sourceMappingURL=index.js.map

package.json

 {
   "name": "draggable-vue-directive",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "description": "A simple directive to handle drag and drop of any Vue component",
@@ -8,3 +8,3 @@ "main": "dist/index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "build": "tsc --sourceMap"
   },
@@ -11,0 +11,0 @@ "repository": {

README.md

 <h1 align="center">draggable-vue-directive</h1>
 
-[![GitHub open issues](https://img.shields.io/github/issues/IsraelZablianov/draggable-vue-directive.svg?maxAge=2592000)](https://github.com/IsraelZablianov/draggable-vue-directive/issues?q=is%3Aopen+is%3Aissue)
-[![npm download](https://img.shields.io/npm/dt/draggable-vue-directive.svg?maxAge=2592000)](https://www.npmjs.com/package/draggable-vue-directive)
+[![GitHub open issues](https://img.shields.io/github/issues/IsraelZablianov/draggable-vue-directive.svg)](https://github.com/IsraelZablianov/draggable-vue-directive/issues?q=is%3Aopen+is%3Aissue)
+[![npm download](https://img.shields.io/npm/dt/draggable-vue-directive.svg)](https://www.npmjs.com/package/draggable-vue-directive)
 [![npm download per month](https://img.shields.io/npm/dm/draggable-vue-directive.svg)](https://www.npmjs.com/package/draggable-vue-directive)
-[![npm version](https://img.shields.io/npm/v/draggable-vue-directive.svg?maxAge=2592000)](https://www.npmjs.com/package/draggable-vue-directive)
+[![npm version](https://img.shields.io/npm/v/draggable-vue-directive.svg)](https://www.npmjs.com/package/draggable-vue-directive)
 [![Package Quality](http://npm.packagequality.com/shield/draggable-vue-directive.svg)](http://packagequality.com/#?package=draggable-vue-directive)
@@ -72,3 +72,13 @@ [![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/)
 
-### draggable value
+### 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>
+
+* [handle](#handle)
+* [onPositionChange](#onpositionchange)
+* [resetInitialPos](#resetinitialpos)
+* [stopDragging](#stopdragging)
+* [boundingRect](#boundingrect)
+
+
 #### handle
@@ -120,6 +130,21 @@ Type: `HtmlElement | Vue`<br>
 Type: `Boolean`<br>
-Required: `false`
+Required: `false`<br>
+default: `undefined`<br>
 
+Returns to the initial position the element was before mounted.
+
+
 #### stopDragging
 Type: `Boolean`<br>
-Required: `false`
+Required: `false`<br>
+default: `undefined`<br>
+
+Immediately stop dragging.
+
+
+#### boundingRect
+Type: `ClientRect`<br>
+Required: `false`<br>
+default: `undefined`<br>
+
+Constrains dragging to within the bounds of the rectangle.

Fixed alerts

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

16941

increased by55.84%

Number of package files

11

increased by22.22%

Lines of code

146

increased by16.8%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

148

increased by19.35%

No dependency changes