Adjust offset handling

BoweryFarming · Nov 27, 2018 · b08a34c · b08a34c
1 parent 22b4432
commit b08a34c
Show file tree

Hide file tree

Showing 6 changed files with 130 additions and 20 deletions.
diff --git a/dist/vuedraggable.js b/dist/vuedraggable.js
@@ -314,10 +314,9 @@ function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr
           return context;
         },
         getVmIndex: function getVmIndex(domIndex) {
-          var correctedDomIndex = domIndex + this.headerOffset;
           var indexes = this.visibleIndexes;
           var numberIndexes = indexes.length;
-          return correctedDomIndex > numberIndexes - 1 ? numberIndexes : indexes[correctedDomIndex];
+          return domIndex > numberIndexes - 1 ? numberIndexes : indexes[domIndex];
         },
         getComponent: function getComponent() {
           return this.$slots.default[0].componentInstance;
@@ -362,14 +361,25 @@ function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr
           this.emitChanges({ removed: removed });
         },
         onDragUpdate: function onDragUpdate(evt) {
+          console.log(evt.newIndex, evt.oldIndex);
+          this.updateEvenemt(evt);
+          console.log(evt.newIndex, evt.oldIndex);
           removeNode(evt.item);
           insertNodeAt(evt.from, evt.item, evt.oldIndex);
+          throw new Error();
           var oldIndex = this.context.index;
           var newIndex = this.getVmIndex(evt.newIndex);
           this.updatePosition(oldIndex, newIndex);
           var moved = { element: this.context.element, oldIndex: oldIndex, newIndex: newIndex };
           this.emitChanges({ moved: moved });
         },
+        updateEvenemt: function updateEvenemt(evt) {
+          this.updateProperty(evt, 'newIndex');
+          this.updateProperty(evt, 'oldIndex');
+        },
+        updateProperty: function updateProperty(evt, propertyName) {
+          evt.hasOwnProperty(propertyName) && (evt[propertyName] += this.headerOffset);
+        },
         computeFutureIndex: function computeFutureIndex(relatedContext, evt) {
           if (!relatedContext.element) {
             return 0;

diff --git a/dist/vuedraggable.min.js b/dist/vuedraggable.min.js
diff --git a/examples/Two_Lists_Clone_slots.html b/examples/Two_Lists_Clone_slots.html
@@ -0,0 +1,58 @@
+<!doctype html>
+<html class="no-js" lang="">
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="x-ua-compatible" content="ie=edge">
+        <title>Example two lists clone</title>
+        <meta name="description" content="">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+
+        <link rel="stylesheet" href="css/main.css">
+    </head>
+    <body>
+
+     <div id="main">
+        <h1>Vue Dragable</h1>
+
+        <div class="drag">
+            <h2>List 1 v-dragable-for</h2>
+            <draggable id="list1" :list="list1" class="dragArea" :options="{draggable:'.item-d', group:{name:'people'}}" @change="log">
+                <div v-for="(element, index) in list1"  :key="index" class="item-d">
+                    {{element.name}} {{index}}
+                </div>
+                <div slot="header">
+                  Header here
+              </div>
+             </draggable>
+
+            <h2>List 2 v-dragable-for</h2>
+            <draggable id="list2" :list="list2" class="dragArea" :options="{draggable:'.item-d',group:'people'}" @change="log">
+                <div v-for="(element, index)  in list2"  :key="index" class="item-d">{{element.name}}</div>
+             </draggable>
+         </div>
+
+        <div class="normal">
+            <h2>List 1 v-for</h2>
+            <div>
+                <div v-for="(element, index) in list1" :key="index">{{element.name}}</div>
+             </div>
+
+            <h2>List 2 v-for</h2>
+            <div>
+                <div v-for="(element, index) in list2" :key="index">{{element.name}}</div>
+            </div>
+        </div>
+
+        <a href="index.html">See basic example</a>
+        <a href="Two_Lists.html">See 2 lists example</a>
+        <a href="Two_Lists_Clone_If.html">See clone v-if element example</a>
+
+
+    </div>     
+    <script type="text/javascript" src="libs\vue\dist\vue.js"></script>
+    <script type="text/javascript" src="libs\Sortable\Sortable.js"></script>
+    <script type="text/javascript" src="src\vuedraggable.js"></script>
+    <script type="text/javascript" src="script\complex.js"></script>
+
+    </body>
+</html>