<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 ----------> <style type="text/css"> /* show the move cursor as the user moves the mouse over the panel header.*/ #draggablePanelList .btn-move { cursor: move; } </style> <!-- Bootstrap 3 panel list. --> <ul id="thumbails" class="list-unstyled container-fluid"> <div class="thumbnail col-md-2"> <img src="https://placeholdit.imgix.net/~text?txtsize=20&txt=210%C3%97178&w=210&h=178" alt="titre"> <div class="caption text-center"> <h3>Thumbnail label</h3> <p> <button type="button" class="btn btn-default" aria-label="Left Align"> <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> </button> <button type="button" class="btn btn-default" aria-label="Left Align"> <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> </button> <a href="" class="btn btn-default btn-move" aria-label="Left Align"> <span class="glyphicon glyphicon-move" aria-hidden="true"></span> </a> </p> </div> </div> <div class="thumbnail col-md-2"> <img src="https://placeholdit.imgix.net/~text?txtsize=20&txt=210%C3%97178&w=210&h=178" alt="titre"> <div class="caption text-center"> <h3>Thumbnail label 2</h3> <p> <button type="button" class="btn btn-default" aria-label="Left Align"> <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> </button> <button type="button" class="btn btn-default" aria-label="Left Align"> <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> </button> <a href="" class="btn btn-default btn-move" aria-label="Left Align"> <span class="glyphicon glyphicon-move" aria-hidden="true"></span> </a> </p> </div> </div> <div class="thumbnail col-md-2"> <img src="https://placeholdit.imgix.net/~text?txtsize=20&txt=210%C3%97178&w=210&h=178" alt="titre"> <div class="caption text-center"> <h3>Thumbnail label 3</h3> <p> <button type="button" class="btn btn-default" aria-label="Left Align"> <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> </button> <button type="button" class="btn btn-default" aria-label="Left Align"> <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> </button> <a href="" class="btn btn-default btn-move" aria-label="Left Align"> <span class="glyphicon glyphicon-move" aria-hidden="true"></span> </a> </p> </div> </div> <div class="thumbnail col-md-2"> <img src="https://placeholdit.imgix.net/~text?txtsize=20&txt=210%C3%97178&w=210&h=178" alt="titre"> <div class="caption text-center"> <h3>Thumbnail label 4</h3> <p> <button type="button" class="btn btn-default" aria-label="Left Align"> <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> </button> <button type="button" class="btn btn-default" aria-label="Left Align"> <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> </button> <a href="" class="btn btn-default btn-move" aria-label="Left Align"> <span class="glyphicon glyphicon-move" aria-hidden="true"></span> </a> </p> </div> </div> </ul>

jQuery(function($) { var panelList = $('#thumbails'); panelList.sortable({ // Only make the .panel-heading child elements support dragging. // Omit this to make then entire <li>...</li> draggable. handle: '.btn-move', update: function() { $('.thumbnail', panelList).each(function(index, elem) { var $listItem = $(elem), newIndex = $listItem.index(); // Persist the new indices. }); } }); });