Skip to content

Instantly share code, notes, and snippets.

@m5lil
Created March 7, 2017 18:00
Show Gist options
  • Save m5lil/d9e17d4f9c3f0fdfd55e6ed0b26b7697 to your computer and use it in GitHub Desktop.
Save m5lil/d9e17d4f9c3f0fdfd55e6ed0b26b7697 to your computer and use it in GitHub Desktop.
#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();
        } );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment