From b88e7f5b1a11ab74c2c1ea07ceac84639f51faa1 Mon Sep 17 00:00:00 2001
From: desmaisons_david <desmaisons_david@hotmail.com>
Date: Thu, 27 Oct 2016 21:31:38 -0200
Subject: [PATCH] Adding element prop issue 22

---
 README.md                          |  6 +++++
 dist/vuedraggable.js               |  8 ++++--
 dist/vuedraggable.min.js           |  2 +-
 examples/Two_Lists.html            |  2 +-
 examples/Two_Lists_Clone.html      |  2 +-
 examples/Two_Lists_Clone_If.html   |  2 +-
 examples/Two_Lists_If.html         |  2 +-
 examples/Two_Lists_NoClone_If.html |  2 +-
 examples/Ul_example.html           | 43 ++++++++++++++++++++++++++++++
 package.json                       |  2 +-
 src/vuedraggable.js                |  6 ++++-
 11 files changed, 67 insertions(+), 10 deletions(-)
 create mode 100644 examples/Ul_example.html

diff --git a/README.md b/README.md
index c1d2bb6d..92ab7e12 100644
--- a/README.md
+++ b/README.md
@@ -50,6 +50,12 @@ Required: `false`
 Option used to inicialize 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.
 
+#### element
+Type: `String`<br>
+Default: `'div'`
+
+HTML root element that draggable component create as outer element for the included slot.
+
 #### clone
 Type: `Function`<br>
 Required: `false`<br>
diff --git a/dist/vuedraggable.js b/dist/vuedraggable.js
index 980d2d31..9abac892 100644
--- a/dist/vuedraggable.js
+++ b/dist/vuedraggable.js
@@ -71,6 +71,10 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
         default: function _default(original) {
           return original;
         }
+      },
+      element: {
+        type: String,
+        default: 'div'
       }
     };
 
@@ -78,7 +82,7 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
       props: props,
 
       render: function render(h) {
-        return h('div', null, this.$slots.default);
+        return h(this.element, null, this.$slots.default);
       },
       mounted: function mounted() {
         var _this2 = this;
@@ -169,7 +173,7 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
     return draggableComponent;
   }
 
-  if (typeof exports == "object")  {
+  if (typeof exports == "object") {
     var Sortable = require("sortablejs");
     module.exports = buildDraggable(Sortable);
   } else if (typeof define == "function" && define.amd) {
diff --git a/dist/vuedraggable.min.js b/dist/vuedraggable.min.js
index 9ce3094c..38749d2d 100644
--- a/dist/vuedraggable.min.js
+++ b/dist/vuedraggable.min.js
@@ -1 +1 @@
-"use strict";var _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t};!function(){function t(t){function e(t){t.parentElement.removeChild(t)}function n(t,e,n){n<t.children.length?t.insertBefore(e,t.children[n]):t.appendChild(e)}function i(t,e){return t.map(function(t){return t.elm}).indexOf(e)}function o(t,e,n){t&&t.splice(n,0,t.splice(e,1)[0])}function r(t,e){return Array.prototype.map.call(e,function(e){return i(t,e)})}function s(t,e){var n=Object(t);for(var i in e)e.hasOwnProperty(i)&&(n[i]=e[i]);return n}function u(t,e){this.$emit(t.toLowerCase(),e)}function l(t){var e=this;return function(n){e["onDrag"+t](n),u.call(e,t,n)}}var c={options:Object,list:{type:Array,required:!1,"default":null},clone:{type:Function,"default":function(t){return t}}},f={props:c,render:function(t){return t("div",null,this.$slots["default"])},mounted:function(){var e=this,n={};["Start","Add","Remove","Update","End"].forEach(function(t){n["on"+t]=l.call(e,t)}),["Choose","Sort","Filter","Move","Clone"].forEach(function(t){n["on"+t]=u.bind(e,t)});var i=s(this.options,n);this._sortable=new t(this.$el,i),this.computeIndexes()},beforeDestroy:function(){this._sortable.destroy()},updated:function(){this.computeIndexes()},methods:{computeIndexes:function(){var t=this;this.$nextTick(function(){t.visibleIndexes=r(t.$slots["default"],t.$el.children)})},onDragStart:function(t){if(this.list){var e=i(this.$slots["default"],t.item),n=this.list[e];this.context={currentIndex:e,element:n},t.item._underlying_vm_=this.clone(n)}},onDragAdd:function(t){var n=t.item._underlying_vm_;if(this.list&&void 0!==n){e(t.item);var i=this.visibleIndexes,o=t.newIndex,r=i.length,s=o>r-1?r:i[o];this.list.splice(s,0,n),this.computeIndexes()}},onDragRemove:function(t){if(this.list){n(this.$el,t.item,t.oldIndex);var i=!!t.clone;if(i)return void e(t.clone);var o=this.context.currentIndex;this.list.splice(o,1)}},onDragUpdate:function(t){if(this.list){e(t.item),n(t.from,t.item,t.oldIndex);var i=this.context.currentIndex,r=this.visibleIndexes[t.newIndex];o(this.list,i,r)}},onDragEnd:function(t){this.computeIndexes()}}};return f}if(typeof exports == "object"){var e=require("sortablejs");module.exports=t(e)}else if("function"==typeof define&&define.amd)define(["Sortable"],function(e){return t(e)});else if(window&&window.Vue&&window.Sortable){var n=t(window.Sortable);Vue.component("draggable",n)}}();
\ No newline at end of file
+"use strict";var _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t};!function(){function t(t){function e(t){t.parentElement.removeChild(t)}function n(t,e,n){n<t.children.length?t.insertBefore(e,t.children[n]):t.appendChild(e)}function i(t,e){return t.map(function(t){return t.elm}).indexOf(e)}function o(t,e,n){t&&t.splice(n,0,t.splice(e,1)[0])}function r(t,e){return Array.prototype.map.call(e,function(e){return i(t,e)})}function s(t,e){var n=Object(t);for(var i in e)e.hasOwnProperty(i)&&(n[i]=e[i]);return n}function l(t,e){this.$emit(t.toLowerCase(),e)}function u(t){var e=this;return function(n){e["onDrag"+t](n),l.call(e,t,n)}}var c={options:Object,list:{type:Array,required:!1,"default":null},clone:{type:Function,"default":function(t){return t}},element:{type:String,"default":"div"}},f={props:c,render:function(t){return t(this.element,null,this.$slots["default"])},mounted:function(){var e=this,n={};["Start","Add","Remove","Update","End"].forEach(function(t){n["on"+t]=u.call(e,t)}),["Choose","Sort","Filter","Move","Clone"].forEach(function(t){n["on"+t]=l.bind(e,t)});var i=s(this.options,n);this._sortable=new t(this.$el,i),this.computeIndexes()},beforeDestroy:function(){this._sortable.destroy()},updated:function(){this.computeIndexes()},methods:{computeIndexes:function(){var t=this;this.$nextTick(function(){t.visibleIndexes=r(t.$slots["default"],t.$el.children)})},onDragStart:function(t){if(this.list){var e=i(this.$slots["default"],t.item),n=this.list[e];this.context={currentIndex:e,element:n},t.item._underlying_vm_=this.clone(n)}},onDragAdd:function(t){var n=t.item._underlying_vm_;if(this.list&&void 0!==n){e(t.item);var i=this.visibleIndexes,o=t.newIndex,r=i.length,s=o>r-1?r:i[o];this.list.splice(s,0,n),this.computeIndexes()}},onDragRemove:function(t){if(this.list){n(this.$el,t.item,t.oldIndex);var i=!!t.clone;if(i)return void e(t.clone);var o=this.context.currentIndex;this.list.splice(o,1)}},onDragUpdate:function(t){if(this.list){e(t.item),n(t.from,t.item,t.oldIndex);var i=this.context.currentIndex,r=this.visibleIndexes[t.newIndex];o(this.list,i,r)}},onDragEnd:function(t){this.computeIndexes()}}};return f}if(typeof exports == "object"){var e=require("sortablejs");module.exports=t(e)}else if("function"==typeof define&&define.amd)define(["Sortable"],function(e){return t(e)});else if(window&&window.Vue&&window.Sortable){var n=t(window.Sortable);Vue.component("draggable",n)}}();
\ No newline at end of file
diff --git a/examples/Two_Lists.html b/examples/Two_Lists.html
index 14450bff..2449b319 100644
--- a/examples/Two_Lists.html
+++ b/examples/Two_Lists.html
@@ -12,7 +12,7 @@
     <body>
      
      <div id="main">
-        <h1>Vue Dragable For</h1>
+        <h1>Vue Dragable</h1>
 
         <div class="drag">
             <h2>List 1 draggable</h2>
diff --git a/examples/Two_Lists_Clone.html b/examples/Two_Lists_Clone.html
index 41a2bf74..babeff0d 100644
--- a/examples/Two_Lists_Clone.html
+++ b/examples/Two_Lists_Clone.html
@@ -12,7 +12,7 @@
     <body>
      
      <div id="main">
-        <h1>Vue Dragable For</h1>
+        <h1>Vue Dragable</h1>
 
         <div class="drag">
             <h2>List 1 v-dragable-for</h2>
diff --git a/examples/Two_Lists_Clone_If.html b/examples/Two_Lists_Clone_If.html
index 35ace481..1f2aa878 100644
--- a/examples/Two_Lists_Clone_If.html
+++ b/examples/Two_Lists_Clone_If.html
@@ -12,7 +12,7 @@
     <body>
      
      <div id="main">
-        <h1>Vue Dragable For</h1>
+        <h1>Vue Dragable</h1>
 
         <div class="drag">
             <h2>List 1 dragable</h2>
diff --git a/examples/Two_Lists_If.html b/examples/Two_Lists_If.html
index 950aa042..034c3985 100644
--- a/examples/Two_Lists_If.html
+++ b/examples/Two_Lists_If.html
@@ -12,7 +12,7 @@
     <body>
      
      <div id="main">
-        <h1>Vue Dragable For</h1>
+        <h1>Vue Dragable</h1>
 
         <div class="drag">
             <h2>List 1 dragable</h2>
diff --git a/examples/Two_Lists_NoClone_If.html b/examples/Two_Lists_NoClone_If.html
index 39c69c39..48b238eb 100644
--- a/examples/Two_Lists_NoClone_If.html
+++ b/examples/Two_Lists_NoClone_If.html
@@ -12,7 +12,7 @@
     <body>
      
      <div id="main">
-        <h1>Vue Dragable For</h1>
+        <h1>Vue Dragable</h1>
 
         <div class="drag">
             <h2>List 1 dragable</h2>
diff --git a/examples/Ul_example.html b/examples/Ul_example.html
new file mode 100644
index 00000000..2f1c5c82
--- /dev/null
+++ b/examples/Ul_example.html
@@ -0,0 +1,43 @@
+<!doctype html>
+<html class="no-js" lang="">
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="x-ua-compatible" content="ie=edge">
+        <title>Example ul element</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 element="ul" class="dragArea" :list="list1" :options="{group:'people'}">
+                <li v-for="(element, index) in list1"  >
+                    {{element.name}} {{index}}
+                </li>
+             </draggable>
+         </div>
+
+        <div class="normal">
+            <h2>List 1 v-for</h2>
+            <div>
+                <div v-for="element in list1" >{{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\lodash\lodash.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>
\ No newline at end of file
diff --git a/package.json b/package.json
index bdabe016..d4c953c2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vuedraggable",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "draggable component for vue",
   "main": "dist/vuedraggable.js",
   "files": [
diff --git a/src/vuedraggable.js b/src/vuedraggable.js
index d558b490..08ec9dcc 100644
--- a/src/vuedraggable.js
+++ b/src/vuedraggable.js
@@ -59,6 +59,10 @@
         clone: {
           type: Function,
           default : (original) => { return original;}
+        },
+        element:{
+          type: String,
+          default: 'div'
         }
       }
 
@@ -66,7 +70,7 @@
         props,
 
         render (h) {
-          return h('div', null, this.$slots.default)
+          return h(this.element, null, this.$slots.default)
         },
 
         mounted () {