Demo

[rickavmaniac]

Hi,

Is there a demo of this plug in in action? Youtube or something? I am a visual guy.

I use the CDN install but I guess I miss something because the plugin dont work... My other livewire components work well on the same page but not the sortable...

[mmltonge]

Couldnt find a demo myself either but got it working by going through the closed issues.

My example below, which expands on the one in readme, allows you to have a list of items that you can re-order, whilst being able to edit their contents inline, or delete each one individually. Am currently trying to work out how to style elements as you drag them but not that clear from the link to shopify docs provided how to do that. Uses tailwind for styling so replace with your own if not using.

The view:

<ul wire:sortable="updateItemOrder" class="w-100">
	@foreach ($items as $item)
		<li wire:sortable.item="{{ $item->id }}" wire:key="item-{{ $item->id }}" class="cursor-pointer flex items-center mb-4">
			<div wire:sortable.handle class="mr-6" title="drag to reorder">
				<svg class="block h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
				</svg>
			</div>
			<div class="px-4 w-full">
				<input class="form-input block w-full" type="text" wire:blur="updateDescription('{{ $item->id }}', $event.target.value)" value="{{ $item->description }}" />
			</div>
			<button wire:click="removeItem('{{ $item->id }}')" class="ml-auto px-3 py-2 border border-black leading-4 text-black bg-white transition ease-in-out duration-150 text-center">Remove</button>
		</li>
	@endforeach
</ul>

The component

public function render()
    {
        // Fetch your items from DB. For example to work your model needs an id field, an order field and a description field
        $items = Item::all();

        return view('path-to-livewire-view', [
          'items'          => $items,
        ]);
    }

    public function updateItemOrder($list)
    {
        foreach($list as $item) {
            Item::find($item['value'])->update(['order' => $item['order']]);
        }
    }

    public function updateDescription($id, $description)
    {
        $item = Item::findOrFail($id);
        $item->update(['description' => $description]);
    }

    public function removeItem($id)
    {
        $item = Item::findOrFail($id);
        $item->delete();
    }

[ivanradojevic-web-dev]

@mmltonge What is this variable $check ?

[mmltonge]

@ivanradojevic-web-dev thats a typo, should be $item

[ivanradojevic-web-dev]

@ivanradojevic-web-dev thats a typo, should be $item

Thanks for the quick reply, and for the example! What I would change is:

public function render()
    {
        return view('livewire.multi-select', [
        	'items' => Item::orderBy("order")->get(),
        ]);
    }

[Neeraj1005]

@rickavmaniac I think Its too late but there is a demo video at the end check this out https://laravel-livewire.com/screencasts/s8-dragging-list