// source http://jsbin.com/piraneyoya

index.html

<style id="jsbin-css">
/* ghostClass */
.ghost {
  opacity: .5;
  background: #C8EBFB;
}











body {
  padding: 20px;
}
.list-group-item {
  cursor: move;
}
</style>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
  
  
<!-- Latest Sortable -->
<script src="http://rubaxa.github.io/Sortable/Sortable.js"></script>
  
  
<!-- Simple List -->
<div id="simpleList" class="list-group"></div>
<script id="jsbin-javascript">
Sortable.create(simpleList, {
  ghostClass: 'ghost'
});




// Generate 100 items
simpleList.innerHTML = Array.apply(null,  new Array(100)).map(function (v, i) {
  return '<div class="list-group-item">item ' +
    (i + 1) +
    '</div>';
}).join('');
</script>
<script id="jsbin-source-html" type="text/html"><\!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
  
  
<\!-- Latest Sortable -->
<script src="http://rubaxa.github.io/Sortable/Sortable.js"><\/script>
  
  
<\!-- Simple List -->
<div id="simpleList" class="list-group"></div>
</script>

<script id="jsbin-source-css" type="text/css">/* ghostClass */
.ghost {
  opacity: .5;
  background: #C8EBFB;
}











body {
  padding: 20px;
}
.list-group-item {
  cursor: move;
}

</script>

<script id="jsbin-source-javascript" type="text/javascript">Sortable.create(simpleList, {
  ghostClass: 'ghost'
});




// Generate 100 items
simpleList.innerHTML = Array.apply(null,  new Array(100)).map(function (v, i) {
  return '<div class="list-group-item">item ' +
    (i + 1) +
    '</div>';
}).join('');</script>

jsbin.piraneyoya.css

/* ghostClass */
.ghost {
  opacity: .5;
  background: #C8EBFB;
}











body {
  padding: 20px;
}
.list-group-item {
  cursor: move;
}

jsbin.piraneyoya.js

Sortable.create(simpleList, {
  ghostClass: 'ghost'
});




// Generate 100 items
simpleList.innerHTML = Array.apply(null,  new Array(100)).map(function (v, i) {
  return '<div class="list-group-item">item ' +
    (i + 1) +
    '</div>';
}).join('');