Merge pull request james2doyle#4 from hamstu/master

Fixed the directive's conflicting prop names
chineseYU · Mar 14, 2016 · 204fa9b · 204fa9b
2 parents 6fc1b94 + f7f2892
commit 204fa9b
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 22 deletions.
diff --git a/README.md b/README.md
@@ -26,14 +26,14 @@ You can load up the `example.html` file here to test the directive.
 Here is how you might typically use this directive:
 
 ```html
-<li v-for="task in tasks" id="{{ $index }}" v-drag-and-drop v-drop="handleDrop">{{ task.title }}</li>
+<li v-for="task in tasks" id="{{ $index }}" v-drag-and-drop drop="handleDrop">{{ task.title }}</li>
 ```
 
 This directive assumes you are using it *inside* of some sort of list of elements.
 
 First, you can see the `id`. In this case, it is being used to inform us of *where in my array of tasks is this item?*.
 
-When the list is changed, `v-drop` is called, and we run `handleDrop` (but we can use any function in our `methods` in the Vue instance), which calls with 2 arguments `(draggedElement, dropppedOnElement)`. This way we can do a swap in our data. For the `example.html`, we use the elements `id` as the index in our data.
+When the list is changed, `drop` is called, and we run `handleDrop` (but we can use any function in our `methods` in the Vue instance), which calls with 2 arguments `(draggedElement, dropppedOnElement)`. This way we can do a swap in our data. For the `example.html`, we use the elements `id` as the index in our data.
 
 Since we get these 2 elements, we can then do a normal array swapping dance, which looks like this:
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-drag-and-drop",
-  "version": "1.2.0",
+  "version": "2.0.0",
   "description": "A for Vue.js directive for providing drag and drop capabilities to elements and data.",
   "homepage": "http://ohdoylerules.com",
   "repository": "https://github.com/james2doyle/vue-drag-and-drop",

diff --git a/vue.drag-and-drop.js b/vue.drag-and-drop.js
@@ -6,13 +6,13 @@
   DragAndDrop.install = function (Vue) {
     Vue.directive('drag-and-drop', {
       params: [
-      'v-drag-and-drop',
-      'v-drag-start',
-      'v-drag-over',
-      'v-drag-enter',
-      'v-drag-leave',
-      'v-drag-end',
-      'v-drop'
+      'drag-and-drop',
+      'drag-start',
+      'drag-over',
+      'drag-enter',
+      'drag-leave',
+      'drag-end',
+      'drop'
       ],
       bind: function () {
         // use the VM so we only have 1 dragging item per app
@@ -23,8 +23,8 @@
           e.dataTransfer.effectAllowed = 'move';
           // Need to set to something or else drag doesn't start
           e.dataTransfer.setData('text', '*');
-          if (typeof(this.vm[this.params.vDragStart]) === 'function') {
-            this.vm[this.params.vDragStart].call(this, e.target);
+          if (typeof(this.vm[this.params.dragStart]) === 'function') {
+            this.vm[this.params.dragStart].call(this, e.target);
           }
         }.bind(this);
         this.handleDragOver = function(e) {
@@ -34,27 +34,27 @@
           }
           e.dataTransfer.dropEffect = 'move';
           e.target.classList.add('drag-over');
-          if (typeof(this.vm[this.params.vDragOver]) === 'function') {
-            this.vm[this.params.vDragOver].call(this, e.target);
+          if (typeof(this.vm[this.params.dragOver]) === 'function') {
+            this.vm[this.params.dragOver].call(this, e.target);
           }
           return false;
         }.bind(this);
         this.handleDragEnter = function(e) {
-          if (typeof(this.vm[this.params.vDragEnter]) === 'function') {
-            this.vm[this.params.vDragEnter].call(this, e.target);
+          if (typeof(this.vm[this.params.dragEnter]) === 'function') {
+            this.vm[this.params.dragEnter].call(this, e.target);
           }
           e.target.classList.add('drag-enter');
         }.bind(this);
         this.handleDragLeave = function(e) {
-          if (typeof(this.vm[this.params.vDragLeave]) === 'function') {
-            this.vm[this.params.vDragLeave].call(this, e.target);
+          if (typeof(this.vm[this.params.dragLeave]) === 'function') {
+            this.vm[this.params.dragLeave].call(this, e.target);
           }
           e.target.classList.remove('drag-enter');
         }.bind(this);
         this.handleDragEnd = function(e) {
           e.target.classList.remove('dragging', 'drag-over', 'drag-enter');
-          if (typeof(this.vm[this.params.vDragEnd]) === 'function') {
-            this.vm[this.params.vDragEnd].call(this, e.target);
+          if (typeof(this.vm[this.params.dragEnd]) === 'function') {
+            this.vm[this.params.dragEnd].call(this, e.target);
           }
         }.bind(this);
         this.handleDrop = function(e) {
@@ -64,9 +64,9 @@
           }
           // Don't do anything if dropping the same column we're dragging.
           if (this.vm._dragSrcEl != e.target) {
-            if (typeof(this.vm[this.params.vDrop]) === 'function') {
+            if (typeof(this.vm[this.params.drop]) === 'function') {
               var el = (e.target.draggable) ? e.target : e.target.parentElement;
-              this.vm[this.params.vDrop].call(this, this.vm._dragSrcEl, el);
+              this.vm[this.params.drop].call(this, this.vm._dragSrcEl, el);
             }
           }
           return false;