<select multiple> の選択画面を2カラムにしたい

Question

###やりたいこと

xxx　111
yyy　222
：

みたいな２カラムの情報を表示して
<select multiple> と同じくドラッグや CTrl+クリックで選択できるようにしたい

###ためしたこと1

<select multiple> <option>xxx 111</section> <option>yyy 222</section> 　　： </select>

optionの中に<div>xxx</div><div>111</div>とかいても raw text になってしまう
スペースの数で調整しようとしてもフォントによってずれるので見栄えが悪い

###ためしたこと2

<select multiple> を 横に並べて選択状態とスクロール状態を一致させて擬似的に
2カラムにみせようとした

https://teratail.com/questions/144638

で質問してみたのですがスクロールとクリックをあわせると特定のブラウザで挙動がおかしくなって解決法がわからず

###ためしたこと3

option の中の文字には修飾できないけど option はCSSで修飾できるので
option を 2 列にならべて偶数番目と奇数番目の選択状態を連動させる

https://codepen.io/anon/pen/EemGMy

こんな感じでサンプルを書いてみたのですが
なぜか inline-block にしたはずの option が折り返してくれず
またスクロールバーの関係で上につけたラベルと中央位置がずれてしまいます

うまい解決方法はないでしょうか
お知恵をお貸しくださると助かります

Comments

[m.ts10806]

コードは外部サイトだけでなくteratailにもコードブロックにてご提示ください。何かでそのサイトが見れなくなった場合、コードの確認ができなくなります。

Answer 1

selectは表のように使うものではないので、希望のものは作れないのではないでしょうか？
とくに複数ブラウザで同じように動くことを希望しているようなので、Firefoxにおいてmultipleなselectのスクロールバーが消せない以上、横に並べるとデザインが変わってきます(Chromeだけならoverflowとbox-sizingでおさまりそうですが)。

ドラッグができることが要件にある？みたいなので、jQuery UI を挙げておきます。
https://api.jqueryui.com/draggable/
https://api.jqueryui.com/selectable/

Comments

[退会済みユーザー]

わー　こんな素敵なライブラリがあるんですね
デモをみる限りまさにやりたいことができそうです
ありがとうございます！！

＞ドラッグができることが要件にある？
今は１カラムの select multiple で実装されていて
わかりやすいように２カラム目を追加してほしいという要件なので
ドラッグに関しては指定はないのですが
できるのであればわざわざ機能を縮小することはないかなという感じです