tag instead of element (issue #520)

Author: David-Desmaisons

example/components/handle.vue

@@ -7,12 +7,7 @@
     <div class="col-7">
       <h3>Draggable {{ draggingInfo }}</h3>
 
-      <draggable
-        element="ul"
-        :list="list"
-        class="list-group"
-        handle=".handle"
-      >
+      <draggable tag="ul" :list="list" class="list-group" handle=".handle">
         <li
           class="list-group-item"
           v-for="(element, idx) in list"

example/components/infra/nested.vue

@@ -1,8 +1,8 @@
 <template>
-  <draggable class="dragArea" :element="'ul'" :list="tasks" :group="{ name: 'g1' }">
+  <draggable class="dragArea" tag="ul" :list="tasks" :group="{ name: 'g1' }">
     <li v-for="el in tasks" :key="el.name">
       <p>{{ el.name }}</p>
-      <nested-draggable :tasks="el.tasks"/>
+      <nested-draggable :tasks="el.tasks" />
     </li>
   </draggable>
 </template>

example/components/simple.vue

@@ -15,10 +15,10 @@
           <input
             id="disabled"
             type="checkbox"
-            v-model="disabled"
+            v-model="enabled"
             class="form-check-input"
           />
-          <label class="form-check-label" for="disabled">Disable DnD</label>
+          <label class="form-check-label" for="disabled">DnD enabled</label>
         </div>
       </div>
     </div>
@@ -28,7 +28,7 @@
 
       <draggable
         :list="list"
-        :disabled="disabled"
+        :disabled="!enabled"
         class="list-group"
         @start="dragging = true"
         @end="dragging = false"
@@ -59,7 +59,7 @@ export default {
   },
   data() {
     return {
-      disabled: false,
+      enabled: true,
       list: [
         { name: "John", id: 0 },
         { name: "Joao", id: 1 },

example/components/table-column-example..vue

@@ -5,8 +5,10 @@
 
       <table class="table table-striped">
         <thead class="thead-dark">
-          <draggable v-model="headers" element="tr">
-            <th v-for="header in headers" :key="header" scope="col">{{ header }}</th>
+          <draggable v-model="headers" tag="tr">
+            <th v-for="header in headers" :key="header" scope="col">
+              {{ header }}
+            </th>
           </draggable>
         </thead>
         <tbody>
@@ -17,9 +19,9 @@
       </table>
     </div>
 
-    <rawDisplayer class="col-2" :value="list" title="List"/>
+    <rawDisplayer class="col-2" :value="list" title="List" />
 
-    <rawDisplayer class="col-2" :value="headers" title="Headers"/>
+    <rawDisplayer class="col-2" :value="headers" title="Headers" />
   </div>
 </template>
 

example/components/table-example.vue

@@ -11,7 +11,7 @@
             <th scope="col">Sport</th>
           </tr>
         </thead>
-        <draggable v-model="list" :element="'tbody'">
+        <draggable v-model="list" tag="tbody">
           <tr v-for="item in list" :key="item.name">
             <td scope="row">{{ item.id }}</td>
             <td>{{ item.name }}</td>

example/components/third-party.vue

@@ -11,7 +11,7 @@
       </h3>
 
       <draggable
-        element="el-collapse"
+        tag="el-collapse"
         :list="list"
         :component-data="collapseComponentData"
       >

example/components/transition-example-2.vue

@@ -10,7 +10,7 @@
       <h3>Transition</h3>
       <draggable
         class="list-group"
-        element="ul"
+        tag="ul"
         v-model="list"
         v-bind="dragOptions"
         @start="drag = true"

example/components/transition-example.vue

@@ -10,7 +10,7 @@
       <h3>Transition</h3>
       <draggable
         class="list-group"
-        element="ul"
+        tag="ul"
         v-model="list"
         v-bind="dragOptions"
         @start="isDragging = true"

src/vuedraggable.js

@@ -103,6 +103,10 @@ const props = {
     type: String,
     default: "div"
   },
+  tag: {
+    type: String,
+    default: null
+  },
   move: {
     type: Function,
     default: null
@@ -163,7 +167,7 @@ const draggableComponent = {
       update("on", on);
       update("props", props);
     }
-    return h(this.element, attributes, children);
+    return h(this.getTag(), attributes, children);
   },
 
   created() {
@@ -173,6 +177,10 @@ const draggableComponent = {
       );
     }
 
+    if (this.element !== "div") {
+      console.warn("Element props is deprecated please use tag props instead.");
+    }
+
     if (this.options !== undefined) {
       console.warn(
         "Options props is deprecated, add sortable options directly as vue.draggable item, or use v-bind."
@@ -182,12 +190,10 @@ const draggableComponent = {
 
   mounted() {
     this.noneFunctionalComponentMode =
-      this.element.toLowerCase() !== this.$el.nodeName.toLowerCase();
+      this.getTag().toLowerCase() !== this.$el.nodeName.toLowerCase();
     if (this.noneFunctionalComponentMode && this.transitionMode) {
       throw new Error(
-        `Transition-group inside component is not supported. Please alter element value or remove transition-group. Current element value: ${
-        this.element
-        }`
+        `Transition-group inside component is not supported. Please alter tag value or remove transition-group. Current tag value: ${this.getTag()}`
       );
     }
     var optionsAdded = {};
@@ -199,17 +205,11 @@ const draggableComponent = {
       optionsAdded["on" + elt] = emit.bind(this, elt);
     });
 
-    const options = Object.assign(
-      {},
-      this.options,
-      this.$attrs,
-      optionsAdded,
-      {
-        onMove: (evt, originalEvent) => {
-          return this.onDragMove(evt, originalEvent);
-        }
+    const options = Object.assign({}, this.options, this.$attrs, optionsAdded, {
+      onMove: (evt, originalEvent) => {
+        return this.onDragMove(evt, originalEvent);
       }
-    );
+    });
     !("draggable" in options) && (options.draggable = ">*");
     this._sortable = new Sortable(this.rootContainer, options);
     this.computeIndexes();
@@ -250,6 +250,10 @@ const draggableComponent = {
   },
 
   methods: {
+    getTag() {
+      return this.tag || this.element;
+    },
+
     getIsCloning() {
       const { group } = this.$attrs;
       const groupConsideringOption = group || this.getOptionGroup();