Add rtl support (#83)

* Add rtl support

README.md

@@ -142,6 +142,7 @@ The following props can be passed to the `<VueNestable>` Component:
 | childrenProp | String *(Optional)* | 'children'    | Name of the property that holds an array of children.                                                                                                                                                                           |
 | class        | String *(Optional)* | null          | Name of the property for classes to add to the item.                                                                                                                                                                            |
 | hooks        | Object *(Optional)* | {}            | Allows you to register hooks that fire whenever vue-nestable performs some action                                                                                                                                               |
+| rtl        | Boolean *(Optional)* | false            | Add rtl support to vue-nestable                                                                                                                                               |
 
 
 ## Slots

example/App.vue

@@ -35,6 +35,10 @@
       <p>Wrap your item in a <code>vue-nestable-handle</code> to allow it to be dragged.</p>
       <Simple />
 
+      <h1>Sort items by drag & drop (RTL)</h1>
+      <p>Wrap your item in a <code>vue-nestable-handle</code> to allow it to be dragged.</p>
+      <SimpleRtl />
+
       <h1>Advanced (Drag handle, Classes, and Hooks)</h1>
       <p>
         You can customize how deeply items can be nested as well what the <code>id</code> prop is called.<br>
@@ -58,6 +62,7 @@
 // import example components
 import List from './components/List.vue'
 import Simple from './components/Simple.vue'
+import SimpleRtl from './components/SimpleRtl.vue'
 import Advanced from './components/Advanced.vue'
 import CrossList from './components/CrossList.vue'
 import NoItems from './components/NoItems.vue'
@@ -72,6 +77,7 @@ export default {
   components: {
     List,
     Simple,
+    SimpleRtl,
     Advanced,
     CrossList,
     NoItems

example/assets/vue-nestable.css

@@ -4,11 +4,17 @@
 .nestable {
   position: relative;
 }
+.nestable.rtl {
+  direction: rtl;
+}
 .nestable .nestable-list {
   margin: 0;
   padding: 0 0 0 40px;
   list-style-type: none;
 }
+.nestable.rtl .nestable-list {
+  padding: 0 40px 0 0;
+}
 .nestable > .nestable-list {
   padding: 0;
 }
@@ -53,13 +59,20 @@
   z-index: 100;
   pointer-events: none;
 }
+.nestable.rtl .nestable-drag-layer {
+  left: auto;
+  right: 0;
+}
 .nestable-drag-layer > .nestable-list {
   position: absolute;
   top: 0;
   left: 0;
   padding: 0;
   background-color: rgba(106, 127, 233, 0.274);
 }
+.nestable.rtl .nestable-drag-layer > .nestable-list {
+  padding: 0;
+}
 .nestable [draggable="true"] {
   cursor: move;
 }

example/components/SimpleRtl.vue

@@ -0,0 +1,50 @@
+<template>
+  <ComponentExample link="SimpleRtl">
+    <VueNestable
+      v-model="nestableItems"
+      rtl
+    >
+      <VueNestableHandle
+        slot-scope="{ item }"
+        :item="item"
+      >
+        <i class="fas fa-user" />
+        {{ item.text }}
+      </VueNestableHandle>
+    </VueNestable>
+  </ComponentExample>
+</template>
+
+<script>
+import ComponentExample from './ComponentExample.vue'
+
+export default {
+  components: {
+    ComponentExample
+  },
+
+  data () {
+    return {
+      nestableItems: [
+        {
+          id: 0,
+          text: 'Andy'
+        }, {
+          id: 1,
+          text: 'Harry',
+          children: [{
+            id: 2,
+            text: 'David'
+          }]
+        }, {
+          id: 3,
+          text: 'Lisa'
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>

src/VueNestable.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="['nestable', `nestable-${group}`]">
+  <div :class="['nestable', `nestable-${group}`, rtl ? 'rtl' : '']">
     <ol class="nestable-list nestable-group">
       <!-- No items in list -->
       <Placeholder
@@ -135,6 +135,11 @@ export default {
       type: Object,
       required: false,
       default: () => ({})
+    },
+    rtl: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
 
@@ -321,7 +326,7 @@ export default {
           }
         }
 
-        const diffX = clientX - this.mouse.last.x
+        const diffX = this.rtl ? this.mouse.last.x - clientX : clientX - this.mouse.last.x
         if (
           (diffX >= 0 && this.mouse.shift.x >= 0) ||
           (diffX <= 0 && this.mouse.shift.x <= 0)