vue-drag-and-drop-list - npm Package Compare versions

Comparing version 0.1.1 to 0.2.1

dist/vue-drag-and-drop-list.js

 /*!
- * Vue-drag-and-drop-list.js v0.1.1
+ * Vue-drag-and-drop-list.js v0.2.1
  * (c) 2016 Hejx
@@ -17,3 +17,3 @@ * Released under the MIT License.
 DragAndDropList.install = function(Vue) {
-  // 存储状态
+  // save status
   var dndDropEffectWorkaround = {}, dndDragTypeWorkaround = {};
@@ -58,3 +58,3 @@
         if (event._dndHandle && event.dataTransfer.setDragImage) {
-          event.dataTransfer.setDragImage(this.el[0], 0, 0);
+          event.dataTransfer.setDragImage(this.el, 0, 0);
         }
@@ -113,3 +113,3 @@
         if (typeof(this.vm[this.params.dndSelected]) === 'function') {
-          this.vm[this.params.dndSelected].call(this, event.target);
+          this.vm[this.params.dndSelected].call(this, this.params.dndData[this.params.dndIndex], event.target);
         }
@@ -132,5 +132,3 @@ event.stopPropagation();
     },
-    update: function (newValue, oldValue) {
-
-    },
+    update: function (newValue, oldValue) {},
     unbind: function () {
@@ -385,5 +383,3 @@ this.el.removeEventListener('dragstart', this.handleDragstart, false);
     },
-    update: function (newValue, oldValue) {
-
-    },
+    update: function (newValue, oldValue) {},
     unbind: function () {
@@ -396,2 +392,56 @@ this.el.removeEventListener('dragenter', this.handleDragenter, false);
   });
+
+  Vue.directive('dnd-nodrag', {
+    bind: function () {
+
+      this.handleDragstart = function (event) {
+        event = event.originalEvent || event;
+
+        if (!event._dndHandle) {
+          // If a child element already reacted to dragstart and set a dataTransfer object, we will
+          // allow that. For example, this is the case for user selections inside of input elements.
+          if (!(event.dataTransfer.types && event.dataTransfer.types.length)) {
+            event.preventDefault();
+          }
+          event.stopPropagation();
+        }
+      }.bind(this);
+
+      this.handleDragend = function (event) {
+        event = event.originalEvent || event;
+        if (!event._dndHandle) {
+          event.stopPropagation();
+        }
+      }.bind(this);
+
+      this.el.setAttribute('draggable', true);
+      this.el.addEventListener('dragstart', this.handleDragstart, false);
+      this.el.addEventListener('dragend', this.handleDragend, false);
+    },
+    update: function (newValue, oldValue) {},
+    unbind: function () {
+      this.el.removeEventListener('dragstart', this.handleDragstart, false);
+      this.el.removeEventListener('dragend', this.handleDragend, false);
+    }
+  });
+
+  Vue.directive('dnd-handle', {
+    bind: function () {
+
+      this.handle = function(event){
+        event = event.originalEvent || event;
+        event._dndHandle = true;
+      }.bind(this);
+
+      this.el.setAttribute('draggable', true);
+      this.el.addEventListener('dragstart', this.handle, false);
+      this.el.addEventListener('dragend', this.handle, false);
+    },
+    update: function (newValue, oldValue) {},
+    unbind: function () {
+      this.el.removeEventListener('dragstart', this.handle, false);
+      this.el.removeEventListener('dragend', this.handle, false);
+    }
+  });
+
 };
@@ -398,0 +448,0 @@

index.js

@@ -5,3 +5,3 @@
 DragAndDropList.install = function(Vue) {
-  // 存储状态
+  // save status
   var dndDropEffectWorkaround = {}, dndDragTypeWorkaround = {};
@@ -46,3 +46,3 @@
         if (event._dndHandle && event.dataTransfer.setDragImage) {
-          event.dataTransfer.setDragImage(this.el[0], 0, 0);
+          event.dataTransfer.setDragImage(this.el, 0, 0);
         }
@@ -101,3 +101,3 @@
         if (typeof(this.vm[this.params.dndSelected]) === 'function') {
-          this.vm[this.params.dndSelected].call(this, event.target);
+          this.vm[this.params.dndSelected].call(this, this.params.dndData[this.params.dndIndex], event.target);
         }
@@ -120,5 +120,3 @@ event.stopPropagation();
     },
-    update: function (newValue, oldValue) {
-
-    },
+    update: function (newValue, oldValue) {},
     unbind: function () {
@@ -373,5 +371,3 @@ this.el.removeEventListener('dragstart', this.handleDragstart, false);
     },
-    update: function (newValue, oldValue) {
-
-    },
+    update: function (newValue, oldValue) {},
     unbind: function () {
@@ -384,4 +380,58 @@ this.el.removeEventListener('dragenter', this.handleDragenter, false);
   });
+
+  Vue.directive('dnd-nodrag', {
+    bind: function () {
+
+      this.handleDragstart = function (event) {
+        event = event.originalEvent || event;
+
+        if (!event._dndHandle) {
+          // If a child element already reacted to dragstart and set a dataTransfer object, we will
+          // allow that. For example, this is the case for user selections inside of input elements.
+          if (!(event.dataTransfer.types && event.dataTransfer.types.length)) {
+            event.preventDefault();
+          }
+          event.stopPropagation();
+        }
+      }.bind(this);
+
+      this.handleDragend = function (event) {
+        event = event.originalEvent || event;
+        if (!event._dndHandle) {
+          event.stopPropagation();
+        }
+      }.bind(this);
+
+      this.el.setAttribute('draggable', true);
+      this.el.addEventListener('dragstart', this.handleDragstart, false);
+      this.el.addEventListener('dragend', this.handleDragend, false);
+    },
+    update: function (newValue, oldValue) {},
+    unbind: function () {
+      this.el.removeEventListener('dragstart', this.handleDragstart, false);
+      this.el.removeEventListener('dragend', this.handleDragend, false);
+    }
+  });
+
+  Vue.directive('dnd-handle', {
+    bind: function () {
+
+      this.handle = function(event){
+        event = event.originalEvent || event;
+        event._dndHandle = true;
+      }.bind(this);
+
+      this.el.setAttribute('draggable', true);
+      this.el.addEventListener('dragstart', this.handle, false);
+      this.el.addEventListener('dragend', this.handle, false);
+    },
+    update: function (newValue, oldValue) {},
+    unbind: function () {
+      this.el.removeEventListener('dragstart', this.handle, false);
+      this.el.removeEventListener('dragend', this.handle, false);
+    }
+  });
+
 };
 
 export default DragAndDropList;

package.json

 {
   "name": "vue-drag-and-drop-list",
-  "version": "0.1.1",
+  "version": "0.2.1",
   "description": "A Vue.js directives with the HTML5 drag & drop API.",
@@ -5,0 +5,0 @@ "main": "dist/vue-drag-and-drop-list.js",

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

53046

increased by18.82%

Number of package files

15

increased by25%

Lines of code

980

increased by20.1%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes