adding event support

Author: David-Desmaisons

dist/vuedraggable.min.js

@@ -6,4 +6,7 @@
 }
 .dragArea{
      min-height: 10px;	
+}
+.blue{
+	background-color: blue;
 }

examples/css/main.css

@@ -14,9 +14,9 @@
      <div id="main">
         <h1>Vue Draggable</h1>
 
-        <div class="drag">
+        <div :class="dragging? 'blue' : 'drag'">
             <h2>Draggable</h2>
-            <draggable  :list="list">
+            <draggable  :list="list" @start="dragging=true" @end="dragging=false">
                 <div v-for="element in list">{{element.name}}</div>
              </draggable>
          </div>

examples/index.html

@@ -1,10 +1,11 @@
 var vm = new Vue({
 	el: "#main",
 	data: {
-		list:[{name:"John"}, 
-				{name:"Joao"}, 
-				{name:"Jean"} ]
-		},
+		list: [ {name: "John"}, 
+				{name: "Joao"}, 
+				{name: "Jean"} ],
+		dragging: false
+	},
 	methods:{
 			add: function(){
 				this.list.push({name:'Juan'});

examples/script/main.js

@@ -38,6 +38,18 @@
       return output
     }
 
+    function emit (evtName, evtData) {
+      this.$emit( evtName.toLowerCase(), evtData)
+    }
+
+    function delegateAndEmit (evtName) {
+      const ctx = this
+      return function (evtData) {
+        ctx['onDrag' + evtName].call(ctx, evtData)
+        emit.call(ctx, evtName, evtData)
+      }
+    }
+
     function install (Vue) {
       const props = {
         options: Object,
@@ -53,9 +65,13 @@
 
         mounted () {
           var optionsAdded = {};
-          ['Start', 'Add', 'Remove', 'Update', 'End'].forEach(elt => {
-            optionsAdded['on' + elt] = this['onDrag' + elt].bind(this)
-          })
+          ['Start', 'Add', 'Remove', 'Update', 'End'].forEach( elt => {
+            optionsAdded['on' + elt] = delegateAndEmit.call(this, elt)
+          });
+
+          ['Choose', 'Sort', 'Filter', 'Move', 'Clone'].forEach( elt => {
+            optionsAdded['on' + elt] = emit.bind(this, elt)
+          });
 
           const options = merge(this.options, optionsAdded)
           this._sortable = new Sortable(this.$el, options)
@@ -69,9 +85,8 @@
         methods: {
 
           computeIndexes () {
-            this.$nextTick( () =>{
-               const slots = this.$slots.default
-               this.visibleIndexes = computeIndexes(slots, this.$el.children)
+            this.$nextTick( () => {
+               this.visibleIndexes = computeIndexes(this.$slots.default, this.$el.children)
             })
           },