Adding element prop issue 22

SortableJS · Oct 27, 2016 · b88e7f5 · b88e7f5
1 parent 61df172
commit b88e7f5
Show file tree

Hide file tree

Showing 11 changed files with 67 additions and 10 deletions.
diff --git 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
@@ -71,14 +71,18 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
         default: function _default(original) {
           return original;
         }
+      },
+      element: {
+        type: String,
+        default: 'div'
       }
     };
 
     var draggableComponent = {
       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
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>
diff --git 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
@@ -59,14 +59,18 @@
         clone: {
           type: Function,
           default : (original) => { return original;}
+        },
+        element:{
+          type: String,
+          default: 'div'
         }
       }
 
       const draggableComponent = {
         props,
 
         render (h) {
-          return h('div', null, this.$slots.default)
+          return h(this.element, null, this.$slots.default)
         },
 
         mounted () {