vuedraggable - npm Package Compare versions

Comparing version 2.7.0-rc0 to 2.8.0-rc0

dist/vuedraggable.js

 'use strict';
 
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
 (function () {
@@ -51,2 +53,3 @@ "use strict";
     });
+    var draggingElement = null;
 
@@ -192,5 +195,11 @@ var props = {
         },
+        getVmIndex: function getVmIndex(domIndex) {
+          var indexes = this.visibleIndexes;
+          var numberIndexes = indexes.length;
+          return domIndex > numberIndexes - 1 ? numberIndexes : indexes[domIndex];
+        },
         onDragStart: function onDragStart(evt) {
           this.context = this.getUnderlyingVm(evt.item);
           evt.item._underlying_vm_ = this.clone(this.context.element);
+          draggingElement = evt.item;
         },
@@ -203,6 +212,3 @@ onDragAdd: function onDragAdd(evt) {
           removeNode(evt.item);
-          var indexes = this.visibleIndexes;
-          var domNewIndex = evt.newIndex;
-          var numberIndexes = indexes.length;
-          var newIndex = domNewIndex > numberIndexes - 1 ? numberIndexes : indexes[domNewIndex];
+          var newIndex = this.getVmIndex(evt.newIndex);
           this.spliceList(newIndex, 0, element);
@@ -229,3 +235,3 @@ this.computeIndexes();
           var oldIndex = this.context.index;
-          var newIndex = this.visibleIndexes[evt.newIndex];
+          var newIndex = this.getVmIndex(evt.newIndex);
           this.updatePosition(oldIndex, newIndex);
@@ -235,2 +241,12 @@ var moved = { element: this.context.element, oldIndex: oldIndex, newIndex: newIndex };
         },
+        computeFutureIndex: function computeFutureIndex(relatedContext, evt) {
+          if (!relatedContext.element) {
+            return 0;
+          }
+          var domChildren = [].concat(_toConsumableArray(evt.to.children));
+          var currentDOMIndex = domChildren.indexOf(evt.related);
+          var currentIndex = relatedContext.component.getVmIndex(currentDOMIndex);
+          var draggedInList = domChildren.indexOf(draggingElement) != -1;
+          return draggedInList ? currentIndex : currentIndex + 1;
+        },
         onDragMove: function onDragMove(evt) {
@@ -244,2 +260,4 @@ var onMove = this.move;
           var draggedContext = this.context;
+          var futureIndex = this.computeFutureIndex(relatedContext, evt);
+          Object.assign(draggedContext, { futureIndex: futureIndex });
           Object.assign(evt, { relatedContext: relatedContext, draggedContext: draggedContext });
@@ -250,2 +268,3 @@ return onMove(evt);
           this.computeIndexes();
+          draggingElement = null;
         }
@@ -257,3 +276,3 @@ }
 
-  if (typeof exports == "object") {
+  if ((typeof exports === 'undefined' ? 'undefined' : _typeof(exports)) == "object") {
     var Sortable = require("sortablejs");
@@ -260,0 +279,0 @@ module.exports = buildDraggable(Sortable);

package.json

 {
   "name": "vuedraggable",
-  "version": "2.7.0-rc0",
+  "version": "2.8.0-rc0",
   "description": "draggable component for vue",
@@ -5,0 +5,0 @@ "main": "dist/vuedraggable.js",

README.md

@@ -82,3 +82,3 @@ <p align="center"><img width="100"src="https://raw.githubusercontent.com/SortableJS/Vue.Draggable/master/logo.png"></p>
 
-Option used to inicialize the sortable object see: [sortable option documentation](https://github.com/RubaXa/Sortable#options)<br>
+Option used to initialize the sortable object see: [sortable option documentation](https://github.com/RubaXa/Sortable#options)<br>
 Note that all the method starting by "on" will be ignored as draggable component expose the same API via events.
@@ -90,3 +90,3 @@
 
-HTML root element that draggable component create as outer element for the included slot.
+HTML node type of the element that draggable component create as outer element for the included slot.
 
@@ -115,8 +115,9 @@ #### clone
 ```
-evt object has same property as [Sortable onMove event](https://github.com/RubaXa/Sortable#move-event-object), plus two addicional properties:
-`move event` object addicional properties:
+evt object has same property as [Sortable onMove event](https://github.com/RubaXa/Sortable#move-event-object), and 3 additional properties:
  - `draggedContext`:  context linked to dragged element
  	- `index`: dragged element index
 	- `element`: dragged element underlying view model element
- - `relatedContext`: context linked to current drag position
+ - `futureIndex`:  Number. 
+    Potencial index of the dragged element if the drop operation is accepted.
+ - `relatedContext`: context linked to current drag operation
  	- `index`: target element index
@@ -170,13 +171,19 @@ - `element`: target element view model element
 
+### Gotchas
+  - Drag operation with empty list:
+
+    To be abble to drag items on an empty draggable component, set a min-height>0 on the `draggable` component or the `transition-group` if any.  
+
 ### Fiddle
-Simple:
+
+- Simple:
 https://jsfiddle.net/dede89/sqssmhtz/
 
-Two Lists:
+- Two Lists:
 https://jsfiddle.net/dede89/32ao2rpm/
 
-Example with list clone:
+- Example with list clone:
 https://jsfiddle.net/dede89/t3m5krea/
 
-Example with transition-group:
+- Example with transition-group:
 https://jsfiddle.net/dede89/m2v0orcn/
@@ -217,2 +224,2 @@
 
-  Just include `vuedraggable.min.js` or 'vue.dragable.for' after Vue.<br>
+  Just include `Sortable.min.js` and `vuedraggable.min.js` after Vue.<br>

No alert changes

Improved metrics

Total package byte prevSize

19899

increased by7.41%

Lines of code

251

increased by7.73%

Number of lines in readme file

221

increased by3.27%

No dependency changes