Bootstrap Snippet Sortable Demo using HTML CSS jQuery

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="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ---------->
<div class="container">
    <div class="row">
        <h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2>
        <ol class="nested_with_switch vertical">
                <li>
                  Item 1
                </li>
                <li>
                  Item 2
                </li>
                <li>
                  Item 3
                </li>
                <li>
                  Item 4
                  <ol>
                    <li>Item 3.1</li>
                    <li>Item 3.2</li>
                    <li>Item 3.3</li>
                    <li>Item 3.4</li>
                    <li>Item 3.5</li>
                    <li>Item 3.6</li>
                  </ol>
                </li>
                <li>
                  Item 5
                </li>
                <li>
                  Item 6
                </li>
              </ol>
        
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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
body.dragging, body.dragging * {
  cursor: move !important;
}
.dragged {
  position: absolute;
  opacity: 0.5;
  z-index: 2000;
}
ol.example li.placeholder {
  position: relative;
  /** More li styles **/
}
ol.example li.placeholder:before {
  position: absolute;
  /** Define arrowhead **/
}
ol.nested_with_switch li, ol.simple_with_animation li, ol.serialization li, ol.default li {
    cursor: pointer;
}
ol.vertical li {
    display: block;
    margin: 5px;
    padding: 5px;
    border: 1px solid #CCC;
    color: #08C;
    background: none repeat scroll 0% 0% #EEE;
}
li {
    line-height: 18px;
}
ol {
    list-style-type: none;
}
ol {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$(function  () {
var oldContainer
$("ol.nested_with_switch").sortable({
  group: 'nested',
  afterMove: function (placeholder, container) {
    if(oldContainer != container){
      if(oldContainer)
        oldContainer.el.removeClass("active")
      container.el.addClass("active")
      
      oldContainer = container
    }
  },
  onDrop: function (item, container, _super) {
    container.el.removeClass("active")
    _super(item)
  }
})
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Sortable Demo"
Bootstrap 3.2.0 Snippet by r4zorax

Related: See More

Questions / Comments:

"Sortable Demo" Bootstrap 3.2.0 Snippet by r4zorax

Related: See More

Questions / Comments:

"Sortable Demo"
Bootstrap 3.2.0 Snippet by r4zorax