add handlerItem position

Author: hejianxian

demo/src/views/handler.vue

@@ -19,7 +19,11 @@
                         v-bind:class="{'selected': selected === item}"
                         >
                         <div v-dnd-nodrag class="nodrag">
-                          <div v-dnd-handle class="handle"></div>
+                          <div v-dnd-handle
+                               dnd-handle-left="20"
+                               dnd-handle-top="20"
+                               class="handle">
+                          </div>
                           <div class="name">
                               {{item.label}}
                           </div>

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

@@ -1,5 +1,5 @@
 /*!
- * Vue-drag-and-drop-list.js v0.8.2
+ * Vue-drag-and-drop-list.js v0.8.3
  * (c) 2016 Hejx
  * Released under the MIT License.
  * https://github.com/Alex-fun/vue-drag-and-drop-list#readme
@@ -54,7 +54,7 @@ DragAndDropList.install = function(Vue) {
 
         // Try setting a proper drag image if triggered on a dnd-handle (won't work in IE).
         if (event._dndHandle && event.dataTransfer.setDragImage) {
-          event.dataTransfer.setDragImage(this.el, event._dndHandleLeft - this.el.getBoundingClientRect().left, event._dndHandleTop - this.el.getBoundingClientRect().top);
+          event.dataTransfer.setDragImage(this.el, event._dndHandleLeft, event._dndHandleTop);
         }
 
         // Invoke callback
@@ -425,13 +425,14 @@ DragAndDropList.install = function(Vue) {
   });
 
   Vue.directive('dnd-handle', {
+    params: ['dnd-handle-left', 'dnd-handle-top'],
     bind: function () {
-
+      
       this.handle = function(event){
         event = event.originalEvent || event;
         event._dndHandle = true;
-        event._dndHandleLeft = this.el.getBoundingClientRect().left;
-        event._dndHandleTop = this.el.getBoundingClientRect().top;
+        event._dndHandleLeft = this.params.dndHandleLeft || 0;
+        event._dndHandleTop = this.params.dndHandleTop || 0;
       }.bind(this);
 
       this.el.setAttribute('draggable', true);

index.js

@@ -42,7 +42,7 @@ DragAndDropList.install = function(Vue) {
 
         // Try setting a proper drag image if triggered on a dnd-handle (won't work in IE).
         if (event._dndHandle && event.dataTransfer.setDragImage) {
-          event.dataTransfer.setDragImage(this.el, event._dndHandleLeft - this.el.getBoundingClientRect().left, event._dndHandleTop - this.el.getBoundingClientRect().top);
+          event.dataTransfer.setDragImage(this.el, event._dndHandleLeft, event._dndHandleTop);
         }
 
         // Invoke callback
@@ -413,13 +413,14 @@ DragAndDropList.install = function(Vue) {
   });
 
   Vue.directive('dnd-handle', {
+    params: ['dnd-handle-left', 'dnd-handle-top'],
     bind: function () {
-
+      
       this.handle = function(event){
         event = event.originalEvent || event;
         event._dndHandle = true;
-        event._dndHandleLeft = this.el.getBoundingClientRect().left;
-        event._dndHandleTop = this.el.getBoundingClientRect().top;
+        event._dndHandleLeft = this.params.dndHandleLeft || 0;
+        event._dndHandleTop = this.params.dndHandleTop || 0;
       }.bind(this);
 
       this.el.setAttribute('draggable', true);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-drag-and-drop-list",
-  "version": "0.8.2",
+  "version": "0.8.3",
   "description": "A Vue.js directives with the HTML5 drag & drop API.",
   "main": "dist/vue-drag-and-drop-list.js",
   "directories": {