選択操作コンポーネントの基本実装

jQuery UI の選択操作（Selectable）コンポーネントは、リスト項目や要素グループを選択可能にする機能を提供します。デフォルト実装では、親要素に対して selectable() メソッドを呼び出すことで子要素を選択可能にします。

<ul id="selectableContainer">
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
</ul>

<script>
$(function() {
  $("#selectableContainer").selectable();
});
</script>

選択操作時には状態に応じてクラスが自動付与されます：

• ui-selectee: 選択可能要素
• ui-selecting: 選択中要素
• ui-selected: 選択済み要素
• ui-unselecting: 選択解除中要素

要素フィルタリングと選択制限

filter オプションで選択対象を限定できます。特定クラスを持つ要素のみ選択可能にする例：

$("#elementGroup").selectable({
  filter: ".selectableItem"
});

cancel オプションでは選択不可要素を指定します：

$("#elementGroup").selectable({
  cancel: ".nonSelectable"
});

イベントハンドリング

選択操作のライフサイクルイベントを活用した処理例：

$("#elementGroup").selectable({
  start: function() {
    console.log("選択開始");
  },
  selected: function(event, ui) {
    $(ui.selected).addClass("active");
  },
  unselected: function(event, ui) {
    $(ui.unselected).removeClass("active");
  }
});

並び替えコンポーネントの基本実装

並び替え（Sortable）コンポーネントは要素の順序変更を可能にします。基本実装：

<ul id="sortableContainer">
  <li>要素A</li>
  <li>要素B</li>
  <li>要素C</li>
</ul>

<script>
$(function() {
  $("#sortableContainer").sortable();
});
</script>

高度な設定オプション

並び替え動作を制御する主要オプション：

$("#sortableContainer").sortable({
  axis: "y",           // 移動方向制限（垂直）
  containment: "parent", // 移動範囲制限
  cursor: "move",       // ドラッグ時のカーソル
  opacity: 0.7,         // ドラッグ中透明度
  placeholder: "sortablePlaceholder" // ドロップ位置表示用クラス
});

接続リスト間の要素移動

connectWith オプションで複数リスト間で要素を移動可能にします：

<ul id="listA">...</ul>
<ul id="listB">...</ul>

<script>
$("#listA, #listB").sortable({
  connectWith: ["#listA", "#listB"]
});
</script>

イベント処理と状態管理

並び替え操作時のイベントを活用した例：

$("#sortableContainer").sortable({
  start: function(event, ui) {
    ui.item.data("originalPosition", ui.item.index());
  },
  update: function(event, ui) {
    const newPosition = ui.item.index();
    const originalPosition = ui.item.data("originalPosition");
    console.log(`位置変更: ${originalPosition} → ${newPosition}`);
  }
});

サーバー連携と状態保存

serialize メソッドで要素順序をデータ化：

$("#saveOrder").click(function() {
  const sortedData = $("#sortableContainer").sortable("serialize");
  
  $.post("/update-order", sortedData, function(response) {
    console.log("順序更新完了");
  });
});

コンポーネントの応用例

選択操作と並び替えを組み合わせた画像ギャラリーの実装：

<div id="thumbnailContainer">
  <img src="image1.jpg" class="selectableItem">
  <img src="image2.jpg" class="selectableItem">
</div>
<div id="viewer"></div>

<script>
$(function() {
  // サムネイル選択機能
  $("#thumbnailContainer").selectable({
    filter: ".selectableItem",
    selected: function(event, ui) {
      const selectedItems = $(".ui-selected", this);
      if(selectedItems.length === 1) {
        displaySingleImage(ui.selected);
      } else {
        displayMultipleImages(selectedItems);
      }
    }
  });

  // ギャラリー並び替え機能
  $("#thumbnailContainer").sortable({
    axis: "x",
    items: ".selectableItem",
    update: saveImageOrder
  });
  
  function displaySingleImage(element) {
    $("#viewer").html(`<img src="${$(element).attr("src")}">`);
  }
  
  function saveImageOrder() {
    const orderData = $("#thumbnailContainer").sortable("serialize");
    // サーバーへ順序データ送信
  }
});
</script>

タブコンポーネントとの統合

タブの並び替えを実現する方法：

<div id="tabs">
  <ul>
    <li><a href="#tab1">タブ1</a></li>
    <li><a href="#tab2">タブ2</a></li>
  </ul>
</div>

<script>
$(function() {
  $("#tabs").tabs().sortable({
    axis: "x",
    items: "li",
    update: function() {
      $("#tabs").tabs("refresh");
    }
  });
});
</script>

ドラッグ操作との連携

ドラッグ可能要素を並び替えリストに追加：

<div id="draggableItems">
  <div class="item">項目A</div>
</div>

<ul id="sortableTarget"></ul>

<script>
$(function() {
  $(".item").draggable({
    connectToSortable: "#sortableTarget",
    helper: "clone"
  });

  $("#sortableTarget").sortable({
    receive: function(event, ui) {
      console.log("要素追加: " + ui.item.text());
    }
  });
});
</script>