expressCart/views/settings_menu.hbs

{{> partials/menu}}
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<div class="col-lg-9">
	<div class="row">
		<div class="col-md-10">
			<h2>Menu</h2>
            <table class="table table-condensed">
                <th></th>
                <th>Menu</th>
                <th>Link</th>
                <th></th>
                <tbody id="draggable_list">
                    {{#each menu.items}}
                        <tr class="drag-row" id="menuId-{{@key}}">
                            <input type="hidden" class="navId" value="{{title}}">
                            <td class="dragable_item col-md-1 td-pad"><i class="fa fa-arrows"></i></td>
                            <td class="dragable_item col-md-2">
                                <input type="text" class="form-control input-sm navMenu" value="{{title}}">
                            </td>
                            <td class="dragable_item col-md-6">
                                <input type="text" class="form-control input-sm navLink" value="{{link}}">
                            </td>
                            <td class="col-md-2">
                                <a class="btn btn-danger btn-sm settings-menu-delete" data-id="{{@key}}">
                                    <i class="fa fa-trash-o"></i>
                                </a>
                                <button type="submit" class="btn btn-success btn-sm" id="settings-menu-update" >
                                    <i class="fa fa-floppy-o"></i>
                                </button>
                            </td>
                        </tr>
                    {{/each}}
                        <tr>
                            <td class="dragable_item col-md-1"></td>
                            <td class="dragable_item col-md-2">
                                <input type="text" class="form-control input-sm" id="newNavMenu">
                            </td>
                            <td class="dragable_item col-md-6">
                                <input type="text" class="form-control input-sm" id="newNavLink">
                            </td>
                            <td class="col-md-2">
                                <button type="submit" id="settings-menu-new" class="btn btn-success btn-sm">
                                    <i class="fa fa-plus"></i>
                                </button>
                            </td>
                        </tr>
                </tbody>
            </table>
            <p class="text-muted">
                
                {{ @root.__ "Setting_menu_explain" }}
            </p>
		</div>
	</div>
</div>

<script>
    $(document).ready(function() {
        $('#draggable_list').sortable({
            update: function (event, ui) {
                var sorted = $( ".navId" ).serialize();
                $.ajax({
                    data: sorted,
                    type: 'POST',
                    url: '/admin/settings/menu/save_order'
                })
                .fail(function(msg){
                    showNotification(msg.responseJSON.message, 'danger', true);
                });
            }
        });
    });
</script>