Merge pull request james2doyle#8 from gmsa/master

Added drag listener and handler
chineseYU · Jul 18, 2016 · a2e5def · a2e5def
2 parents 6f94c36 + 8e1c203
commit a2e5def
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git a/example.html b/example.html
@@ -42,6 +42,7 @@ <h3>Some Tasks</h3>
       drag-leave="handleDragLeave"
       drag-end="handleDragEnd"
       drop="handleDrop"
+      drag="handleDrag"
       >
       <input type="checkbox" name="completed[]" value="1" v-bind:checked="task.completed">
       <strong>{{ task.title }}</strong>
@@ -103,7 +104,11 @@ <h3>Some Images</h3>
         var dummy = this.images[itemOne.getAttribute('data-index')];
         this.images.$set(itemOne.getAttribute('data-index'), this.images[itemTwo.getAttribute('data-index')]);
         this.images.$set(itemTwo.getAttribute('data-index'), dummy);
-      }
+      },
+      handleDrag: function(elem) {
+          //console.log('handleDrag', elem);
+          this.loggedEvent = 'handleDrag';
+      },
     }
   });
 </script>

diff --git a/vue.drag-and-drop.js b/vue.drag-and-drop.js
@@ -8,6 +8,7 @@
       params: [
       'drag-and-drop',
       'drag-start',
+      'drag',
       'drag-over',
       'drag-enter',
       'drag-leave',
@@ -51,6 +52,11 @@
           }
           e.target.classList.remove('drag-enter');
         }.bind(this);
+        this.handleDrag = function(e) {
+            if (typeof(this.vm[this.params.drag]) === 'function') {
+                this.vm[this.params.drag].call(this, e.target);
+            }
+        }.bind(this);
         this.handleDragEnd = function(e) {
           e.target.classList.remove('dragging', 'drag-over', 'drag-enter');
           if (typeof(this.vm[this.params.dragEnd]) === 'function') {
@@ -76,6 +82,7 @@
         this.el.addEventListener('dragstart', this.handleDragStart, false);
         this.el.addEventListener('dragenter', this.handleDragEnter, false);
         this.el.addEventListener('dragover', this.handleDragOver, false);
+        this.el.addEventListener('drag', this.handleDrag, false);
         this.el.addEventListener('dragleave', this.handleDragLeave, false);
         this.el.addEventListener('drop', this.handleDrop, false);
         this.el.addEventListener('dragend', this.handleDragEnd, false);
@@ -91,6 +98,7 @@
         this.el.removeEventListener('dragenter', this.handleDragEnter);
         this.el.removeEventListener('dragover', this.handleDragOver);
         this.el.removeEventListener('dragleave', this.handleDragLeave);
+        this.el.removeEventListener('drag', this.handleDrag);
       }
     });
   }