<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <div class="col-lg-6"> <section class="panel panel-special"> <div class="panel-body"> <div class="menuacco"> <div class="accordion"> <div class="accordion-group" > <div class="row rowlistheader"> <div class="col-lg-1">#</div> <div class="col-lg-5">Title</div> <div class="col-lg-3">Description</div> <div class="col-lg-3">Action</div> </div> <div class="accordion-heading" id="menubody"> <div class="rowlist" id="order_60"> <div class="row"> <div class="col-lg-1">1</div> <div class="col-lg-5">Title 1</div> <div class="col-lg-3">Description 1</div> <div class="col-lg-3 text-right"> <a class="btn btn-success btn-xs fa fa-arrows" data-original-title="Drag Order" data-placement="top" href="#"></a> <a class="btn btn-warning btn-xs fa fa-sitemap accordion-toggle" data-original-title="Submenu" data-placement="top" data-toggle="collapse" data-parent="#allmenu" href="#main60"></a> <a class="btn btn-primary btn-xs fa fa-pencil" data-original-title="Edit" data-placement="top" href="#"></a> <a class="btn btn-danger btn-xs fa fa-trash-o" data-original-title="Delete" data-placement="top" href="#"></a> </div> </div> <div class="accordion-body collapse" id="main60"> <div class="accordion-heading"> <div class="accordion-body"> <div class="accordion-heading"> <div class="rowlist" id="order_53"> <div class="row"> <div class="col-lg-1">11</div> <div class="col-lg-5"><span class="fa fa-ellipsis-h"></span> Title 1-1</div> <div class="col-lg-3">-</div> <div class="col-lg-3 text-right"> <a class="btn btn-primary btn-xs fa fa-pencil" data-original-title="Edit" data-placement="top" href="#"></a> <a class="btn btn-danger btn-xs fa fa-trash-o" data-original-title="Delete" data-placement="top" href="#"></a> </div> </div> </div> </div> </div> </div> </div> </div> <div class="rowlist" id="order_6"> <div class="row"> <div class="col-lg-1">2</div> <div class="col-lg-5">Title 2</div> <div class="col-lg-3">Description 2</div> <div class="col-lg-3 text-right"> <a class="btn btn-success btn-xs fa fa-arrows" data-original-title="Drag Order" data-placement="top" href="#"></a> <a class="btn btn-warning btn-xs fa fa-sitemap accordion-toggle" data-original-title="Submenu" data-placement="top" data-toggle="collapse" data-parent="#allmenu" href="#main6"></a> <a class="btn btn-primary btn-xs fa fa-pencil" data-original-title="Edit" data-placement="top" href="#"></a> <a class="btn btn-danger btn-xs fa fa-trash-o" data-original-title="Delete" data-placement="top" href="#"></a> </div> </div> <div class="accordion-body collapse" id="main6"> <div class="accordion-heading"> <div class="accordion-body"> <div class="accordion-heading"> <div class="rowlist" id="order_92"> <div class="row"> <div class="col-lg-1">21</div> <div class="col-lg-5"><span class="fa fa-ellipsis-h"></span> Sub Title 2-1</div> <div class="col-lg-3">-</div> <div class="col-lg-3 text-right"> <a class="btn btn-primary btn-xs fa fa-pencil" data-original-title="Edit" data-placement="top" href="#"></a> <a class="btn btn-danger btn-xs fa fa-trash-o" data-original-title="Delete" data-placement="top" href="#"></a> </div> </div> </div> </div> </div> <div class="accordion-body"> <div class="accordion-heading"> <div class="rowlist" id="order_17"> <div class="row"> <div class="col-lg-1">22</div> <div class="col-lg-5"><span class="fa fa-ellipsis-h"></span> Sub Title 2-2</div> <div class="col-lg-3">-</div> <div class="col-lg-3 text-right"> <a class="btn btn-primary btn-xs fa fa-pencil" data-original-title="Edit" data-placement="top" href="#"></a> <a class="btn btn-danger btn-xs fa fa-trash-o" data-original-title="Delete" data-placement="top" href="#"></a> </div> </div> </div> </div> </div> <div class="accordion-body"> <div class="accordion-heading"> <div class="rowlist" id="order_20"> <div class="row"> <div class="col-lg-1">23</div> <div class="col-lg-5"><span class="fa fa-ellipsis-h"></span> Sub Title 2-3</div> <div class="col-lg-3">-</div> <div class="col-lg-3 text-right"> <a class="btn btn-primary btn-xs fa fa-pencil" data-original-title="Edit" data-placement="top" href="#"></a> <a class="btn btn-danger btn-xs fa fa-trash-o" data-original-title="Delete" data-placement="top" href="#"></a> </div> </div> </div> </div> </div> <div class="accordion-body"> <div class="accordion-heading"> <div class="rowlist" id="order_79"> <div class="row"> <div class="col-lg-1">24</div> <div class="col-lg-5"><span class="fa fa-ellipsis-h"></span> Sub Title 2-4</div> <div class="col-lg-3">-</div> <div class="col-lg-3 text-right"> <a class="btn btn-primary btn-xs fa fa-pencil" data-original-title="Edit" data-placement="top" href="#"></a> <a class="btn btn-danger btn-xs fa fa-trash-o" data-original-title="Delete" data-placement="top" href="#"></a> </div> </div> </div> </div> </div> <div class="accordion-body"> <div class="accordion-heading"> <div class="rowlist" id="order_57"> <div class="row"> <div class="col-lg-1">25</div> <div class="col-lg-5"><span class="fa fa-ellipsis-h"></span> Sub Title 2-5</div> <div class="col-lg-3">-</div> <div class="col-lg-3 text-right"> <a class="btn btn-primary btn-xs fa fa-pencil" data-original-title="Edit" data-placement="top" href="#"></a> <a class="btn btn-danger btn-xs fa fa-trash-o" data-original-title="Delete" data-placement="top" href="#"></a> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="rowlist" id="order_5"> <div class="row"> <div class="col-lg-1">3</div> <div class="col-lg-5">Title 3</div> <div class="col-lg-3">Description</div> <div class="col-lg-3 text-right"> <a class="btn btn-success btn-xs fa fa-arrows" data-original-title="Drag Order" data-placement="top" href="#"></a> <a class="btn btn-warning btn-xs fa fa-sitemap accordion-toggle" data-original-title="Submenu" data-placement="top" data-toggle="collapse" data-parent="#allmenu" href="#main5"></a> <a class="btn btn-primary btn-xs fa fa-pencil" data-original-title="Edit" data-placement="top" href="#"></a> <a class="btn btn-danger btn-xs fa fa-trash-o" data-original-title="Delete" data-placement="top" href="#"></a> </div> </div> <div class="accordion-body collapse" id="main5"> <div class="accordion-heading"> <div class="rowlist" id="order_62"> <div class="row"> <div class="col-lg-1">31</div> <div class="col-lg-5"><span class="fa fa-ellipsis-h"></span> Sub Title 3-1</div> <div class="col-lg-3">-</div> <div class="col-lg-3 text-right"> <a class="btn btn-warning btn-xs fa fa-sitemap accordion-toggle" data-original-title="Submenu" data-placement="top" data-toggle="collapse" data-parent="#allmenu" href="#main62"></a> <a class="btn btn-primary btn-xs fa fa-pencil" data-original-title="Edit" data-placement="top" href="#"></a> <a class="btn btn-danger btn-xs fa fa-trash-o" data-original-title="Delete" data-placement="top" href="#"></a> </div> </div> <div class="accordion-body collapse" id="main62"> <div class="accordion-heading"> <div class="accordion-body"> <div class="accordion-heading"> <div class="rowlist" id="order_73"> <div class="row"> <div class="col-lg-1">311</div> <div class="col-lg-5"><span class="fa fa-ellipsis-h"></span> <span class="fa fa-ellipsis-h"></span> Sub Title 3-1-1</div> <div class="col-lg-3">-</div> <div class="col-lg-3 text-right"> <a class="btn btn-primary btn-xs fa fa-pencil" data-original-title="Edit" data-placement="top" href="#"></a> <a class="btn btn-danger btn-xs fa fa-trash-o" data-original-title="Delete" data-placement="top" href="#"></a> </div> </div> </div> </div> </div> <div class="accordion-body"> <div class="accordion-heading"> <div class="rowlist" id="order_89"> <div class="row"> <div class="col-lg-1">312</div> <div class="col-lg-5"><span class="fa fa-ellipsis-h"></span> <span class="fa fa-ellipsis-h"></span> Sub Title 3-1-2</div> <div class="col-lg-3">-</div> <div class="col-lg-3 text-right"> <a class="btn btn-primary btn-xs fa fa-pencil" data-original-title="Edit" data-placement="top" href="#"></a> <a class="btn btn-danger btn-xs fa fa-trash-o" data-original-title="Delete" data-placement="top" href="#"></a> </div> </div> </div> </div> </div> <div class="accordion-body"> <div class="accordion-heading"> <div class="rowlist" id="order_93"> <div class="row"> <div class="col-lg-1">313</div> <div class="col-lg-5"><span class="fa fa-ellipsis-h"></span> <span class="fa fa-ellipsis-h"></span> Sub Title 3-1-3 </div> <div class="col-lg-3">-</div> <div class="col-lg-3 text-right"> <a class="btn btn-primary btn-xs fa fa-pencil" data-original-title="Edit" data-placement="top" href="#"></a> <a class="btn btn-danger btn-xs fa fa-trash-o" data-original-title="Delete" data-placement="top" href="#"></a> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="rowlist" id="order_64"> <div class="row"> <div class="col-lg-1">32</div> <div class="col-lg-5"><span class="fa fa-ellipsis-h"></span> Sub Title 3-2</div> <div class="col-lg-3">-</div> <div class="col-lg-3 text-right"> <a class="btn btn-warning btn-xs fa fa-sitemap accordion-toggle" data-original-title="Altmenü" data-placement="top" data-toggle="collapse" data-parent="#allmenu" href="#main64"></a> <a class="btn btn-primary btn-xs fa fa-pencil" data-original-title="Edit" data-placement="top" href="#"></a> <a class="btn btn-danger btn-xs fa fa-trash-o" data-original-title="Delete" data-placement="top" href="#"></a> </div> </div> <div class="accordion-body collapse" id="main64"> <div class="accordion-heading"> <div class="accordion-body"> <div class="accordion-heading"> <div class="rowlist" id="order_15"> <div class="row"> <div class="col-lg-1">321</div> <div class="col-lg-5"><span class="fa fa-ellipsis-h"></span> <span class="fa fa-ellipsis-h"></span> Sub Title 3-2-1</div> <div class="col-lg-3">-</div> <div class="col-lg-3 text-right"> <a class="btn btn-primary btn-xs fa fa-pencil" data-original-title="Edit" data-placement="top" href="#"></a> <a class="btn btn-danger btn-xs fa fa-trash-o" data-original-title="Delete" data-placement="top" href="#"></a> </div> </div> </div> </div> </div> <div class="accordion-body"> <div class="accordion-heading"> <div class="rowlist" id="order_51"> <div class="row"> <div class="col-lg-1">322</div> <div class="col-lg-5"><span class="fa fa-ellipsis-h"></span> <span class="fa fa-ellipsis-h"></span> Sub Title 3-2-2</div> <div class="col-lg-3">-</div> <div class="col-lg-3 text-right"> <a class="btn btn-primary btn-xs fa fa-pencil" data-original-title="Edit" data-placement="top" href="#"></a> <a class="btn btn-danger btn-xs fa fa-trash-o" data-original-title="Delete" data-placement="top" href="#"></a> </div> </div> </div> </div> </div> <div class="accordion-body"> <div class="accordion-heading"> <div class="rowlist" id="order_52"> <div class="row"> <div class="col-lg-1">323</div> <div class="col-lg-5"><span class="fa fa-ellipsis-h"></span> <span class="fa fa-ellipsis-h"></span> Sub Title 3-2-3</div> <div class="col-lg-3">-</div> <div class="col-lg-3 text-right"> <a class="btn btn-primary btn-xs fa fa-pencil" data-original-title="Edit" data-placement="top" href="#"></a> <a class="btn btn-danger btn-xs fa fa-trash-o" data-original-title="Delete" data-placement="top" href="#"></a> </div> </div> </div> </div> </div> <div class="accordion-body"> <div class="accordion-heading"> <div class="rowlist" id="order_54"> <div class="row"> <div class="col-lg-1">324</div> <div class="col-lg-5"><span class="fa fa-ellipsis-h"></span> <span class="fa fa-ellipsis-h"></span> Sub Title 3-2-4</div> <div class="col-lg-3">-</div> <div class="col-lg-3 text-right"> <a class="btn btn-primary btn-xs fa fa-pencil" data-original-title="Edit" data-placement="top" href="#"></a> <a class="btn btn-danger btn-xs fa fa-trash-o" data-original-title="Delete" data-placement="top" href="#"></a> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </section> </div>

@import url("//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"); .menuacco .accordion-heading { position: relative; } .menuacco .accordion-heading .edit { position: absolute; top: 8px; right: 30px; } .menuacco .collapse.in { overflow: visible; } .rowlist { margin-top: 10px; margin-bottom:10px; border-bottom: 1px solid #e2e2e2; } .rowlistheader { padding-top: 10px; padding-bottom: 10px; background-color: #F6F6F6; font-weight: bold; margin: 2px; } .rowplaceholder { border: 1px solid green; background-color: white; -webkit-box-shadow: 0px 0px 10px #888; -moz-box-shadow: 0px 0px 10px #888; box-shadow: 0px 0px 10px #888; height: 40px; }

$(document).ready(function(){ $("#menubody").sortable({ axis: "y", opacity: 0.6, placeholder: "rowlist rowplaceholder", cursor: "move", forceHelperSize: true, update: function (event, ui) { var data = $(this).sortable('serialize')+"&action=saveorder"; console.log("data"+data); $.ajax({ data: data, type: 'POST', url: 'ajax/ajax.php', success: function(data){ console.log(data); } }); } }).disableSelection(); });