jQueryUIをはじめる方は必見、超簡単サンプル集～その１～

次に「Selectable」です。
sample4.html「Selectable」

<html>
<head>
  <meta charset="utf-8" />
  <link   type="text/css" rel="stylesheet" src="./jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.min.css">
  <script type="text/javascript" src="./jquery-ui-1.10.3.custom/js/jquery-1.9.1.js"></script>
  <script type="text/javascript" src="./jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>
  <script>$(function() { $("#selectable").selectable(); });</script>
  <style>
    #selectable .ui-selecting{background: #FFAAAA;}
    #selectable .ui-selected{background: #FFCCCC;}
  </style>
</head>
<body>
<ol id="selectable">
  <li class="ui-widget-content">Item 1</li>
  <li class="ui-widget-content">Item 2</li>
  <li class="ui-widget-content">Item 3</li>
  <li class="ui-widget-content">Item 4</li>
  <li class="ui-widget-content">Item 5</li>
</ol>
</body>
</html>

クリックした項目がピンク色になればOKです。複数選択も可能です。

最後に「Sortable」です。
先ほどのsample4.htmlのolタグのid名とscriptの「selectable」を「sortable」に変更します。
sample5.html「Sortable」

<html>
<head>
  <meta charset="utf-8" />
  <link   type="text/css" rel="stylesheet" src="./jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.min.css">
  <script type="text/javascript" src="./jquery-ui-1.10.3.custom/js/jquery-1.9.1.js"></script>
  <script type="text/javascript" src="./jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>
  <script>$(function() { $("#sortable").sortable(); });</script>
  <style>
    #selectable .ui-selecting{background: #FFAAAA;}
    #selectable .ui-selected{background: #FFCCCC;}
  </style>
</head>
<body>
<ol id="sortable">
  <li class="ui-widget-content">Item 1</li>
  <li class="ui-widget-content">Item 2</li>
  <li class="ui-widget-content">Item 3</li>
  <li class="ui-widget-content">Item 4</li>
  <li class="ui-widget-content">Item 5</li>
</ol>
</body>
</html>

各項目をドラッグすることで並び順を変更することができればOKです。