Bootstrap Sortable

HTML

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<ul id="myList" class="list-group boot-order">
  <li class="list-group-item" data-value="HDD">
    <div>HDD</div>
  </li>
  <li class="list-group-item" data-value="CD-ROM">
    <div>CD-Rom</div>
  </li>
  <li class="list-group-item" data-value="Network">
    <div>Network</div>
  </li>
</ul>

CSS

@import url('http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css');
ul {
  cursor: default;
}

.boot-order {
  display: block;
  width: 85%;
  font-size: 14px;
  line-height: 1.42857;
  color: #444;
  overflow: hidden;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 3px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

.boot-order:focus,
.boot-order.focus {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

.boot-order > li {
  cursor: move; /* fallback if grab cursor is unsupported */
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
  border-left: 0;
  border-right: 0;
}

.boot-order > li:first-child {
  border-top: 0;
}

.boot-order > li:last-child {
  border-bottom: 0;
}

.boot-order > li.ui-sortable-helper {
  cursor: grabbing;
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;
  border: 1px solid #ccc !important;
}

JavaScript

var guestBootOrder = ["cdrom", "network", "hd"];
$("#myList").empty();
$.each(guestBootOrder, function(index, value) {
    var itemNode = $.parseHTML("<li class="list-group-item" data-value=" + value + ">" + value + "</li>");
    $("#myList").append(itemNode);
});

$('.boot-order').sortable({
  items: 'li',
  cursor: 'move',
  opacity: 0.6,
  containment: "parent",
  start: function(event, ui) {
    $(this).addClass('focus');
  },
  stop: function(event, ui) {
    $(this).removeClass('focus');
  },
  change: function(event, ui) {
    // callback once started changing order, suggest disable 'save' button
    console.log("reordering");
  },
  update: function(event, ui) {
    // callback once finished order, enable 'save' button and update boot-order array
    console.log("done reordering");
  }
});

// Note that for now this won't support keyboard navigation. I've found this but wasn't able to test it: http://stackoverflow.com/questions/16844616/jqueryui-sortable-with-keyboard