Neeraj1005/Draggable.php

## draggable.blade.php
{{-- <div>
    <ul drag-root="reorder" class="overflow-hidden rounded shadow divide-y">
        @foreach($things as $thing)
            <li drag-item="{{ $thing['id'] }}" draggable="true" wire:key="{{ $thing['id'] }}" class="w-64 p-4 ">
                {{ $thing['title'] }}
            </li>
        @endforeach
    </ul>
</div> --}}


<div>
    <ul wire:sortable="reorder" class="overflow-hidden rounded shadow divide-y">
        @foreach($things as $thing)
            <li wire:sortable.item="{{ $thing['id'] }}" draggable="true" wire:key="{{ $thing['id'] }}" class="w-64 p-4 ">
                <div class="flex justify-between">
                    <span>
                        {{ $thing['title'] }}
                    </span>
                    <div wire:sortable.handle>
                        *
                    </div>
                </div>
            </li>
        @endforeach
    </ul>
</div>

## Draggable.php
<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Draggable extends Component
{
    public $things = [
        ['id'=>1,'title'=>'First Title'],
        ['id'=>2,'title'=>'Second Title'],
        ['id'=>3,'title'=>'Third Title'],
        ['id'=>4,'title'=>'Fourth Title'],
        ['id'=>5,'title'=>'Fifth Title'],
    ];

    public function reorder($orderIds)
    {
        // Below for using simple js method
        // $this->things = collect($orderIds)->map(function ($id) {
        //     return collect($this->things)->where('id', (int) $id)->first();
        // })->toArray();

        // using livewire-soratable plugins
        $this->things = collect($orderIds)->map(function ($id) {
            return collect($this->things)->where('id', (int) $id['value'])->first();
        })->toArray();


    }
    public function render()
    {
        return view('livewire.draggable');
    }
}

## welcome.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel</title>
        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
        <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
        @livewireStyles
    </head>
    <body class="antialiased">
        <div class="relative flex items-top justify-center min-h-screen bg-gray-100 dark:bg-gray-900 sm:items-center sm:pt-0">
            <div class="max-w-6xl mx-auto sm:px-6 lg:px-8">
                <livewire:draggable />
            </div>
        </div>

        @livewireScripts
        <script src="https://cdn.jsdelivr.net/gh/livewire/sortable@v0.x.x/dist/livewire-sortable.js"></script>


        {{-- Using JS core --}}
        {{-- <script>
            let root = document.querySelector('[drag-root]')

            root.querySelectorAll('[drag-item]').forEach(el => {
                el.addEventListener('dragstart', e => {
                    // console.log('start')
                    e.target.setAttribute('dragging',true)
                })

                el.addEventListener('drop', e => {
                    e.target.classList.remove('bg-red-100')

                    let draggingEl = root.querySelector('[dragging]')

                    e.target.before(draggingEl)

                    // Refresh the livewire component

                    let component = Livewire.find(
                        e.target.closest('[wire\\:id]').getAttribute('wire:id')
                    )

                    let orderIds = Array.from(root.querySelectorAll('[drag-item]')).map(itemEl => itemEl.getAttribute('drag-item'))

                    let method = root.getAttribute('drag-root')

                    component.call(method, orderIds)
                })

                el.addEventListener('dragenter', e => {
                    // console.log('start')
                    e.target.classList.add('bg-red-100')

                    e.preventDefault()
                })

                el.addEventListener('dragover', e => e.preventDefault())

                el.addEventListener('dragleave', e => {
                    e.target.classList.remove('bg-red-100')
                })

                el.addEventListener('dragend', e => {
                    // console.log('end')
                    e.target.removeAttribute('dragging')
                })
            })


        </script> --}}
    </body>
</html>
	{{-- <div>
	<ul drag-root="reorder" class="overflow-hidden rounded shadow divide-y">
	@foreach($things as $thing)
	<li drag-item="{{ $thing['id'] }}" draggable="true" wire:key="{{ $thing['id'] }}" class="w-64 p-4 ">
	{{ $thing['title'] }}
	</li>
	@endforeach
	</ul>
	</div> --}}


	<div>
	<ul wire:sortable="reorder" class="overflow-hidden rounded shadow divide-y">
	@foreach($things as $thing)
	<li wire:sortable.item="{{ $thing['id'] }}" draggable="true" wire:key="{{ $thing['id'] }}" class="w-64 p-4 ">
	<div class="flex justify-between">
	<span>
	{{ $thing['title'] }}
	</span>
	<div wire:sortable.handle>
	*
	</div>
	</div>
	</li>
	@endforeach
	</ul>
	</div>
	<?php

	namespace App\Http\Livewire;

	use Livewire\Component;

	class Draggable extends Component
	{
	public $things = [
	['id'=>1,'title'=>'First Title'],
	['id'=>2,'title'=>'Second Title'],
	['id'=>3,'title'=>'Third Title'],
	['id'=>4,'title'=>'Fourth Title'],
	['id'=>5,'title'=>'Fifth Title'],
	];

	public function reorder($orderIds)
	{
	// Below for using simple js method
	// $this->things = collect($orderIds)->map(function ($id) {
	// return collect($this->things)->where('id', (int) $id)->first();
	// })->toArray();

	// using livewire-soratable plugins
	$this->things = collect($orderIds)->map(function ($id) {
	return collect($this->things)->where('id', (int) $id['value'])->first();
	})->toArray();


	}
	public function render()
	{
	return view('livewire.draggable');
	}
	}
	<!DOCTYPE html>
	<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Laravel</title>
	<!-- Fonts -->
	<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
	<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
	@livewireStyles
	</head>
	<body class="antialiased">
	<div class="relative flex items-top justify-center min-h-screen bg-gray-100 dark:bg-gray-900 sm:items-center sm:pt-0">
	<div class="max-w-6xl mx-auto sm:px-6 lg:px-8">
	<livewire:draggable />
	</div>
	</div>

	@livewireScripts
	<script src="https://cdn.jsdelivr.net/gh/livewire/sortable@v0.x.x/dist/livewire-sortable.js"></script>


	{{-- Using JS core --}}
	{{-- <script>
	let root = document.querySelector('[drag-root]')

	root.querySelectorAll('[drag-item]').forEach(el => {
	el.addEventListener('dragstart', e => {
	// console.log('start')
	e.target.setAttribute('dragging',true)
	})

	el.addEventListener('drop', e => {
	e.target.classList.remove('bg-red-100')

	let draggingEl = root.querySelector('[dragging]')

	e.target.before(draggingEl)

	// Refresh the livewire component

	let component = Livewire.find(
	e.target.closest('[wire\\:id]').getAttribute('wire:id')
	)

	let orderIds = Array.from(root.querySelectorAll('[drag-item]')).map(itemEl => itemEl.getAttribute('drag-item'))

	let method = root.getAttribute('drag-root')

	component.call(method, orderIds)
	})

	el.addEventListener('dragenter', e => {
	// console.log('start')
	e.target.classList.add('bg-red-100')

	e.preventDefault()
	})

	el.addEventListener('dragover', e => e.preventDefault())

	el.addEventListener('dragleave', e => {
	e.target.classList.remove('bg-red-100')
	})

	el.addEventListener('dragend', e => {
	// console.log('end')
	e.target.removeAttribute('dragging')
	})
	})


	</script> --}}
	</body>
	</html>