Merge pull request #6 from asantibanez/features/allow-disable-sorting-and-drop

FEATURE: Added ability to enable/disable sort and/or drop

Author: asantibanez

README.md

@@ -237,6 +237,25 @@ Just add a `group` string prop to a `laravel-blade-sortable::sortable` component
 
 ![drag-drop](https://github.com/asantibanez/laravel-blade-sortable/raw/master/examples/drag-drop.gif)
 
+### Enable/Disable sorting and/or drop
+
+Use `:allow-sort=true|false` and `:allow-drop=true|false` to `x-laravel-blade-sortable::sortable` components
+to enable/disable sorting and/or drop of elements.
+
+Both defaults to `true`.
+
+```blade
+<x-laravel-blade-sortable::sortable
+    group="people"
+    :allow-sort="false"
+    :allow-drop="false"
+>
+    {{-- Items here --}}
+</x-laravel-blade-sortable::sortable>
+```
+
+![disable-sort-drop](https://github.com/asantibanez/laravel-blade-sortable/raw/master/examples/disable-sort-drop.gif)
+
 ### Testing
 
 ``` bash

examples/disable-sort-drop.gif

@@ -7,6 +7,8 @@
             ghostClass: '',
             dragHandle: null,
             group: null,
+            allowSort: true,
+            allowDrop: true,
 
             wireComponent: null,
             wireOnSortOrderChange: null,
@@ -18,7 +20,11 @@
                     handle: this.dragHandle,
                     animation: this.animation,
                     ghostClass: this.ghostClass,
-                    group: this.group,
+                    group: {
+                        name: this.group,
+                        put: this.allowDrop,
+                    },
+                    sort: this.allowSort,
                     onSort: evt => {
                         const previousSortOrder = [...this.sortOrder]
                         this.sortOrder = this.computeSortOrderFromChildren()

resources/views/components/scripts.blade.php

@@ -22,13 +22,19 @@ class Sortable extends Component
 
     public $group;
 
+    public $allowDrop;
+
+    public $allowSort;
+
     public function __construct($as = null,
                                 $component = null,
                                 $name = null,
                                 $animation = 150,
                                 $ghostClass = '',
                                 $dragHandle = null,
-                                $group = null)
+                                $group = null,
+                                $allowSort = true,
+                                $allowDrop = true)
     {
         $this->as = $as;
         $this->component = $component;
@@ -37,6 +43,8 @@ public function __construct($as = null,
         $this->ghostClass = $ghostClass;
         $this->dragHandle = $dragHandle;
         $this->group = $group;
+        $this->allowDrop = $allowDrop;
+        $this->allowSort = $allowSort;
     }
 
     public function xInit()
@@ -57,6 +65,8 @@ public function xInit()
             ->push($hasGroup ? "group = '{$this->group}'" : null)
             ->push($hasWireOnSortOrderChangeDirective ? 'wireComponent = $wire' : null)
             ->push($hasWireOnSortOrderChangeDirective ? "wireOnSortOrderChange = '$wireOnSortOrderChange'" : null)
+            ->push($this->allowSort ? 'allowSort = true' : 'allowSort = false')
+            ->push($this->allowDrop ? 'allowDrop = true' : 'allowDrop = false')
             ->push('init()')
             ->filter(function ($line) {
                 return $line !== null;