Updating readme + example

README.md

@@ -113,7 +113,15 @@ Draggable component should directly wrap the draggable elements, or a `transitio
     <button slot="footer" @click="addPeople">Add</button>
 </draggable>
 ```
-
+### With header slot:
+``` html
+<draggable v-model="myArray" :options="{draggable:'.item'}">
+    <div v-for="element in myArray" :key="element.id" class="item">
+        {{element.name}}
+    </div>
+    <button slot="header" @click="addPeople">Add</button>
+</draggable>
+```
 
 ### With Vuex:
 
@@ -290,9 +298,26 @@ HTML:
     - `element`: the moved element
 
 ### Slots
+
+#### Header
+Use the `header` slot to add none-draggable element inside the vuedraggable component.
+Important: it should be used in conjunction with draggable option to tag draggable element.
+Note that header slot will always be added before the default slot regardless its position in the template.
+Ex:
+
+``` html
+<draggable v-model="myArray" :options="{draggable:'.item'}">
+    <div v-for="element in myArray" :key="element.id" class="item">
+        {{element.name}}
+    </div>
+    <button slot="header" @click="addPeople">Add</button>
+</draggable>
+```
+
+#### Footer
 Use the `footer` slot to add none-draggable element inside the vuedraggable component.
 Important: it should be used in conjunction with draggable option to tag draggable element.
-Note that footer slot will always be added after the default slot.
+Note that footer slot will always be added after the default slot regardless its position in the template.
 Ex:
 
 ``` html

dist/vuedraggable.js

@@ -51,7 +51,6 @@ function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr
       var rawIndexes = [].concat(_toConsumableArray(children)).map(function (elt) {
         return elmFromNodes.indexOf(elt);
       });
-      console.log(JSON.stringify(rawIndexes));
       return isTransition ? rawIndexes.filter(function (ind) {
         return ind !== -1;
       }) : rawIndexes;
@@ -363,12 +362,10 @@ 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, evt.item);
           removeNode(evt.item);
           insertNodeAt(evt.from, evt.item, evt.oldIndex);
           var oldIndex = this.context.index;
           var newIndex = this.getVmIndex(evt.newIndex);
-          console.log(newIndex);
           this.updatePosition(oldIndex, newIndex);
           var moved = { element: this.context.element, oldIndex: oldIndex, newIndex: newIndex };
           this.emitChanges({ moved: moved });

examples/index.html

@@ -36,6 +36,8 @@ <h2>Normal v-for</h2>
         <a href="Two_Lists.html">See 2 lists example</a>
         <a href="Two_Lists_Clone.html">See clone element example</a>
         <a href="Two_Lists_Clone_If.html">See clone v-if element example</a>
+        <a href="footerslot.html">See footer slot example</a>
+        <a href="headerslot.html">See header slot example</a>
 
     </div>