mkhleel
3/7/2017 - 6:00 PM

#sortable #order #draggable #laravel

#sortable #order #draggable #laravel

    Route::post('/menu/order', function()
    {
//        dd(Input::get('item'));
        if(Input::has('item'))
        {
            $i = 0;
            foreach(Input::get('item') as $id)
            {
                $i++;
                $item = App\Menu::find($id);
                $item->order = $i;
                $item->save();
            }
            return Response::json(array('success' => true));
        }
        else
        {
            return Response::json(array('success' => false));
        }
    });


        <tbody id="sortable">
            @foreach($menus as $value)
                <tr id="item_{{$value->id}}">
                  <td class="collapsing"><a class="handle">Move</a></td>
                  <td class="collapsing">{{$value->id}}</td>
                  <td><strong>{{$value->title}}</strong><br />{{$value->url}}</td>
                  <td class="one wide">{{$value->order}}</td>
                  <td>{{ $title[$value->parent_id] }}</td>
                  <td class="two wide">
                      <a href = "{{'/dashboard/menu/' . $value->id}}/edit" class="ui left blue mini attached edit_form button icon"><i class="edit icon"></i></a>
                      <a href = "{{'/dashboard/menu/' . $value->id}}/delete"  class="ui right red mini attached delete_form button icon"><i class="trash icon"></i></a>
                  </td>
                </tr>
            @endforeach


        $( function() {
            $( "#sortable" ).sortable({
                'containment': 'parent',
                'revert': true,
                helper: function(e, tr) {
                    var $originals = tr.children();
                    var $helper = tr.clone();
                    $helper.children().each(function(index) {
                        $(this).width($originals.eq(index).width());
                    });
                    return $helper;
                },
                'handle': '.handle',
                update: function(event, ui) {
                    $.post('{{ url('/dashboard/menu/order') }}', $(this).sortable('serialize'), function(data) {
                        if(!data.success) {
                            alert('Whoops, something went wrong :/');
                        }
                    }, 'json');
                }
            });
            $(window).resize(function() {
                $('table.db tr').css('min-width', $('table.db').width());
            });

            $( "#sortable" ).disableSelection();
        } );