Cara Mudah Membuat Drag And Drop Table Pada Laravel

1. Menambahkan Depedency

Di sini kita perlu menginstall depedency pada node module.

npm install jquery-ui

kemudian tambahkan require jquery pada resources/js/app.js.

require('jquery-ui/ui/widgets/sortable');

2. Menambahkan Script pada resources/js/custom.js.

var fixHelper = function(e, ui) {
    ui.children().each(function() {
        $(this).width($(this).width());
    });
    return ui;
};

$( "#tablecontents" ).sortable({
    items: "tr",
    cursor: 'move',
    helper: fixHelper,
    update: function() {
        sendOrderToServer();
    }
});

function sendOrderToServer() {
    var order = [];
    var token = $('meta[name="csrf-token"]').attr('content');
    $('tr.row1').each(function(index, element) {
        order.push({
            id: $(this).attr('data-id'),
            position: index + 1
        });
    });
    
    $.ajax({
        type: "POST", 
        dataType: "json", 
        url: "/admin/post/sort-update",
        data: {
            order: order,
            _token: token
        },
        success: function(response) {
            console.log(response);
            window.location.reload();
        }
    });
};

Production

npm run prod

3. Menambahkan Script pada View

<tbody id="tablecontents">
    @foreach($posts as $post)
    <tr class="row1" data-id="">
        <td class="pl-3"><i class="fa fa-sort"></i></td>
        <td></td>
        <td></td>
    </tr>
    @endforeach
</tbody>

3. Menambahkan Script pada Controller

class PostController extends Controller
{
    public function index()
    {
        $posts = Post::orderBy('order', 'ASC')->get();

        return view('post',compact('posts'));
    }

    public function sortUpdate(Request $request)
    {
        $posts = Post::all();

        foreach ($posts as $post) {
            foreach ($request->order as $order) {
                if ($order['id'] == $post->id) {
                    $post->update(['order' => $order['position']]);
                }
            }
        }
        
        return response()->json(['success' => 'Update Successfully.']);
    }
}

3. Menambahkan Script pada Route

Route::post('post/sort-update', 'PostController@sortUpdate', ['as' => 'admin'])->name('admin.post.sort-update');

note : apabila ingin menambahkan edit order pada form edit, bisa kita tambahkan pada request.

public function syncOrder(Post $post)
{
    if ($post->order == $this->order) return false;
    
    $position = Post::where('order' , '<=', $post->order)->count();
    
    $postsByOrder = Post::order()->get();
    
    foreach ($postsByOrder as $index => $maintainedPost) {
        $order = $index + 1;
        
        if ( ($order >= $this->order) && ($order <= $position) ) {
            $maintainedPost->update([ 'order' => $order + 1 ]);
        } elseif ( ($order >= $position) && ($order <= $this->order) ) {
            $maintainedPost->update([ 'order' => $order - 1 ]);
        } else {
            $maintainedPost->update([ 'order' => $order ]);
        }
    }
    
    $post->update([ 'order' => $this->order ]);
}

Sekian untuk kali ini semoga bermanfaat :D untuk lebih lanjut bisa kunjungi link tersebut.