[jquery-ui]sortableでselect-optionの中身の順番を入れ替えたい。

Question

htmlのselect,optionをドラッグ（或いはキー上下）でソートしたいと思っています。

jquery-uiのsortableで以下のようにすれば動くかと思ったのですが動かず、Googleで検索してもdivやul,tableのサンプルしか出てこずに微妙に困っています。

まずはドラッグで以下のoptionを上下に動かしたいのですが、対応策をご存じの方、ご教授いただけませんでしょうか。

現在はドラッグしようとしてもselected状態になりドラッグされません。

...
<script src="/webjars/jquery/1.11.1/jquery.min.js"></script>
<script src="/webjars/jquery-ui/1.9.2/js/jquery-ui-1.9.2.custom.min.js"></script>
...
<select id="orders" size="20">
	<option value="aaa">aaa</option>
	<option value="bbb">bbb</option>
	<option value="ccc">ccc</option>
	<option value="ddd">ddd</option>
</select>
...
<script type="text/javascript">
<!--
$(function() {
	$('#orders').sortable();
});
//-->
</script>

Answer 1

セレクトボックスはあまり自由に動かすことができません。そのため、質問にあるような挙動を目指す場合はセレクトボックスを独自に実装するのが主流かと思います。

たとえば下記に書かれているライブラリはinput、textarea、divなどの要素で「セレクト」のスタイル／挙動を作って、セレクトボックスの代わりに機能するようになっています。

【厳選！フォーム・セレクトボックスを改善するjQueryプラグイン - WPJ】
https://www.webprofessional.jp/13-jquery-selectboxdrop-down-plugins/

【Selectize.js】
https://selectize.github.io/selectize.js/

【jQuery SelectListActions Plugin Demos】
http://www.jqueryscript.net/demo/Lightweight-Multi-select-Combo-Box-Plugin-For-jQuery-SelectListActions/

Comments

[sllmejacob]

kei344さん、明確にご回答いただきありがとうございました。
例示していただいたリンクを参照して掲題に取り組みたいと思います。