Bootstrap Snippet Sortable thumbnail using HTML Bootstrap Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
    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.
                });
            }
        });
    });
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Sortable thumbnail"
Bootstrap 3.3.0 Snippet by turzam

Related: See More

Questions / Comments:

"Sortable thumbnail" Bootstrap 3.3.0 Snippet by turzam

Related: See More

Questions / Comments:

"Sortable thumbnail"
Bootstrap 3.3.0 Snippet by turzam