diff --git a/README.md b/README.md index 25c07e0..cca9a08 100644 --- a/README.md +++ b/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 + + {{-- Items here --}} + +``` + +![disable-sort-drop](https://github.com/asantibanez/laravel-blade-sortable/raw/master/examples/disable-sort-drop.gif) + ### Testing ``` bash diff --git a/examples/disable-sort-drop.gif b/examples/disable-sort-drop.gif new file mode 100644 index 0000000..fd45050 Binary files /dev/null and b/examples/disable-sort-drop.gif differ diff --git a/resources/views/components/scripts.blade.php b/resources/views/components/scripts.blade.php index f4b0c2e..d986573 100644 --- a/resources/views/components/scripts.blade.php +++ b/resources/views/components/scripts.blade.php @@ -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() diff --git a/src/Components/Sortable.php b/src/Components/Sortable.php index 81e5666..623e032 100644 --- a/src/Components/Sortable.php +++ b/src/Components/Sortable.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;