based on issue #90: allow v-model usage

Author: David-Desmaisons

bower.json

@@ -25,6 +25,6 @@
   ],
   "dependencies": {
     "vue": "^2.0.2",
-    "Sortable": "^1.5.0-rc1"
+    "Sortable": "^1.5.1"
   }
 }

debug.log

@@ -0,0 +1,2 @@
+[0304/225158:ERROR:tcp_listen_socket.cc(76)] Could not bind socket to 127.0.0.1:6004
+[0304/225158:ERROR:node_debugger.cc(86)] Cannot start debugger server

dist/vuedraggable.js

@@ -40,7 +40,7 @@ function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr
       var _this = this;
 
       return function (evtData) {
-        if (_this.list !== null) {
+        if (_this.realList !== null) {
           _this['onDrag' + evtName](evtData);
         }
         emit.call(_this, evtName, evtData);
@@ -61,6 +61,11 @@ function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr
         required: false,
         default: null
       },
+      value: {
+        type: Array,
+        required: false,
+        default: null
+      },
       clone: {
         type: Function,
         default: function _default(original) {
@@ -123,6 +128,9 @@ function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr
         },
         isCloning: function isCloning() {
           return !!this.options && this.options.group !== null && this.options.group.pull === 'clone';
+        },
+        realList: function realList() {
+          return !!this.list ? this.list : this.value;
         }
       },
 
@@ -134,7 +142,7 @@ function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr
             }
           }
         },
-        list: function list() {
+        realList: function realList() {
           this.computeIndexes();
         }
       },
@@ -153,7 +161,7 @@ function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr
         },
         getUnderlyingVm: function getUnderlyingVm(htmlElt) {
           var index = computeVmIndex(this.getChildrenNodes(), htmlElt);
-          var element = this.list[index];
+          var element = this.realList[index];
           return { index: index, element: element };
         },
         getUnderlyingPotencialDraggableComponent: function getUnderlyingPotencialDraggableComponent(_ref) {
@@ -171,23 +179,38 @@ function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr
             _this4.$emit('change', evt);
           });
         },
+        alterList: function alterList(onList) {
+          if (!!this.list) {
+            onList(this.list);
+          } else {
+            var newList = [].concat(_toConsumableArray(this.value));
+            onList(newList);
+            this.$emit('input', newList);
+          }
+        },
         spliceList: function spliceList() {
-          var _list;
+          var _arguments = arguments;
 
-          (_list = this.list).splice.apply(_list, arguments);
+          var spliceList = function spliceList(list) {
+            return list.splice.apply(list, _arguments);
+          };
+          this.alterList(spliceList);
         },
         updatePosition: function updatePosition(oldIndex, newIndex) {
-          this.list.splice(newIndex, 0, this.list.splice(oldIndex, 1)[0]);
+          var updatePosition = function updatePosition(list) {
+            return list.splice(newIndex, 0, list.splice(oldIndex, 1)[0]);
+          };
+          this.alterList(updatePosition);
         },
         getRelatedContextFromMoveEvent: function getRelatedContextFromMoveEvent(_ref2) {
-          var to = _ref2.to,
-              related = _ref2.related;
+          var to = _ref2.to;
+          var related = _ref2.related;
 
           var component = this.getUnderlyingPotencialDraggableComponent(to);
           if (!component) {
             return { component: component };
           }
-          var list = component.list;
+          var list = component.realList;
           var context = { list: list, component: component };
           if (to !== related && list && component.getUnderlyingVm) {
             var destination = component.getUnderlyingVm(related);
@@ -250,7 +273,7 @@ function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr
         },
         onDragMove: function onDragMove(evt) {
           var onMove = this.move;
-          if (!onMove || !this.list) {
+          if (!onMove || !this.realList) {
             return true;
           }
 

dist/vuedraggable.min.js

@@ -0,0 +1,52 @@
+<!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</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 draggable</h2>
+            <draggable class="dragArea" v-model="list1" :options="{group:'people'}" @change="log">
+                <div v-for="(element, index) in list1"  >
+                    {{element.name}} {{index}}
+                </div>
+             </draggable>
+
+            <h2>List 2 draggable</h2>
+            <draggable class="dragArea" v-model="list2" :options="{group:'people'}" @change="log">
+                <div v-for="(element, index) in list2" :key="index">{{element.name}}</div>
+            </draggable>
+         </div>
+
+        <div class="normal">
+            <h2>List 1 v-for</h2>
+            <div>
+                <div v-for="element in list1" >{{element.name}}</div>
+             </div>
+
+            <h2>List 2 v-for</h2>
+            <div>
+                <div v-for="element in list2" >{{element.name}}</div>
+            </div>
+        </div>
+
+        <a href="index.html">See basic 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>
+    </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>