JQuery UI : Sortable

by TrickyUI

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<body>
  <div id="sortable">
    <div class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</div>
    <div class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</div>
    <div class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</div>
    <div class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</div>
    <div class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</div>
    <div class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</div>
    <div class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</div>
  </div>

  <body>

CSS

body {
  background: #fff;
}

#sortable {
  margin: 0 auto;
  padding: 10px;
  width: 60%;
  border: 1px solid #bebebe;
}

#sortable div {
  margin: 5px 0;
  padding: 10px;
  font-size: 16px;
  position: relative;
  text-transform: uppercase;
}

#sortable div span {
  position: absolute;
  right: 5px;
  top: 15px;
}

JavaScript

$(document).ready(function() {
  $("#sortable").sortable();
  $("#sortable").disableSelection();
});