8000 Update documentation · wotzebra/livewire-sortablejs@d15c113 · GitHub
[go: up one dir, main page]
Skip to content 8000

Commit d15c113

Browse files
gdebrauwergdebrauwer
authored
Update documentation
1 parent d81b7e2 commit d15c113

File tree

1 file changed

+65
-5
lines changed

1 file changed

+65
-5
lines changed

‎README.md

Lines changed: 65 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -71,23 +71,72 @@ When the order is updated, you will receive the following array structure in you
7171

7272
### Multiple groups with draggable items
7373

74-
When you have multiple lists, each with items that can be moved between those different lists (e.g. Trello), you have to add the following attributes to your html:
75-
- `wire:sortable-group="methodName"`: This attribute should be added to the html element that encapsulates all lists with. The value of this attribute is the Livewire method that will be executed when an item has been dragged.
74+
When you have multiple lists, each with items that can be moved between those different lists, you have to add the following attributes to your html:
75+
- `wire:sortable-group="methodName"`: This attribute should be added to the html element that encapsulates all lists. The value of this attribute is the Livewire method that will be executed when an item has been dragged.
7676
- `wire:sortable-group.item-group="groupIdentifier"`: This atttribute should be added to the root element of a list with draggable items. The value of this attribute will be used to inform you about the updated order.
7777
- `wire:sortable-group.item="itemIdentifier"`: This atttribute should be added to each individual draggable item in each list. The value of this attribute will be used to inform you about the updated order.
78-
- `wire:sortable.handle`: This is an optional attribute. If you provide this attribute, then you will only be able to drag an item by dragging this html element. If you do not provide it, then the complete item will draggable.
78+
- `wire:sortable-group.handle`: This is an optional attribute. If you provide this attribute, then you will only be able to drag an item by dragging this html element. If you do not provide it, then the complete item will draggable.
7979

8080
```blade
8181
<div wire:sortable-group="updateTaskOrder" style="display: flex">
82+
@foreach ($groups as $group)
83+
<div wire:key="group-{{ $group->id }}">
84+
<h4>{{ $group->label }}</h4>
85+
86+
<ul wire:sortable-group.item-group="{{ $group->id }}">
87+
@foreach ($group->tasks()->orderBy('order')->get() as $task)
88+
<li wire:sortable-group.item="{{ $task->id }}" wire:key="task-{{ $task->id }}">
89+
<span>{{ $task->title }}</span>
90+
<button wire:sortable-group.handle>drag</button>
91+
</li>
92+
@endforeach
93+
</ul>
94+
</div>
95+
@endforeach
96+
</div>
97+
```
98+
99+
When an item is dragged, you will receive the following array structure in the Livewire method you provided to the `wire:sortable-group` directive (in this example, the `updateTaskOrder` method):
100+
101+
```php
102+
[
103+
[
104+
'order' => 1, // order of group (starts at 1, not 0)
105+
'value' => 20, // group id
106+
'items' => [
107+
[
108+
'order' => 1, // order of item within group (starts at 1, not 0)
109+
'value' => 50, // item id
110+
]
111+
]
112+
]
113+
]
114+
```
115+
116+
### Multiple draggable groups with draggable items
117+
118+
When you have multiple lists, each with items that can be moved between those different lists and the lists themselves also need to be draggable, you have to add the following attributes to your html:
119+
- `wire:sortable="methodName"`: This attribute should be added to the html element that encapsulates all draggable groups. The value of this attribute is the Livewire method that will be executed when a group has been dragged.
120+
- `wire:sortable.item="groupIdentifier"`: This atttribute should be added to each individual draggable group. The value of this attribute will be used to inform you about the updated group order.
121+
- `wire:sortable.handle`: This is an optional attribute. If you provide this attribute, then you will only be able to drag a group by dragging this html element. If you do not provide it, then the complete group will draggable.
122+
123+
- `wire:sortable-group="methodName"`: This attribute should be added to the html element that encapsulates all lists. The value of this attribute is the Livewire method that will be executed when an item has been dragged.
124+
- `wire:sortable-group.item-group="groupIdentifier"`: This atttribute should be added to the root element of a list with draggable items. The value of this attribute will be used to inform you about the updated order.
125+
- `wire:sortable-group.item="itemIdentifier"`: This atttribute should be added to each individual draggable item in each list. The value of this attribute will be used to inform you about the updated order.
126+
- `wire:sortable-group.handle`: This is an optional attribute. If you provide this attribute, then you will only be able to drag an item by dragging this html element. If you do not provide it, then the complete item will draggable.
127+
128+
```blade
129+
<div wire:sortable="updateGroupOrder" wire:sortable-group="updateTaskOrder" style="display: flex">
82130
@foreach ($groups as $group)
83131
<div wire:sortable.item="{{ $group->id }}" wire:key="group-{{ $group->id }}">
84132
<h4>{{ $group->label }}</h4>
133+
<button wire:sortable.handle>drag group</button>
85134
86135
<ul wire:sortable-group.item-group="{{ $group->id }}">
87136
@foreach ($group->tasks()->orderBy('order')->get() as $task)
88137
<li wire:sortable-group.item="{{ $task->id }}" wire:key="task-{{ $task->id }}">
89138
<span>{{ $task->title }}</span>
90-
<button wire:sortable.handle>drag</button>
139+
<button wire:sortable.handle>drag item</button>
91140
</li>
92141
@endforeach
93142
</ul>
@@ -96,7 +145,7 @@ When you have multiple lists, each with items that can be moved between those di
96145
</div>
97146
```
98147

99-
When the order is updated, you will receive the following array structure in your Livewire method:
148+
When an item is dragged, you will receive the following array structure in the Livewire method you provided to the `wire:sortable-group` directive (in this example, the `updateTaskOrder` method):
100149

101150
```php
102151
[
@@ -113,6 +162,17 @@ When the order is updated, you will receive the following array structure in you
113162
]
114163
```
115164

165+
When a group is dragged, you will receive the following array structure in the Livewire method you provided to the `wire:sortable` directive (in this example, the `updateGroupOrder` method):
166+
167+
```php
168+
[
169+
[
170+
'order' => 1, // order of group (starts at 1, not 0)
171+
'value' => 20, // group id
172+
]
173+
]
174+
```
175+
116176
## Building
117177

118178
```bash

0 commit comments

Comments
 (0)
0