jQuery UI API カテゴリー詳解: インタラクションを使いこなそう

**概要:** 本記事では、jQuery UIライブラリのインタラクションカテゴリに焦点を当て、各APIの詳細と活用方法を解説します。これにより、スムーズで魅力的なユーザーインターフェースを構築するための知識を深めることができます。

1. ドラッグ可能 (Draggable): 要素を自由に動かそう

**主な内容:**

• draggable() メソッドの紹介と、HTML要素をドラッグ可能にする方法を解説します。
• axis、containment、handle などのオプションを使用して、ドラッグ動作を細かく制御する方法を説明します。
• drag イベントを利用し、ドラッグ中にカスタム処理を実行する方法を紹介します。
• revert オプションを使った、ドラッグ後の要素を元の位置に戻すアニメーションの実装例を示します。

<div id="draggable">
  <p>ドラッグできます</p>
</div>

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

2. ドロップ可能 (Droppable): インタラクティブなターゲットエリアを作成

**主な内容:**

• droppable() メソッドを用いて、HTML要素をドロップ可能なターゲットとして定義する方法を解説します。
• accept、tolerance などのオプションを使い、ドロップ可能な要素の選択やドロップ規則を定義する方法を説明します。
• drop イベントを駆使し、要素がドロップされた際に特定の処理を実行する方法を紹介します。
• ドラッグ可能 (Draggable) 機能と組み合わせ、完全なドラッグ＆ドロップインタラクションを実装する方法を解説します。

<div id="draggable" class="ui-widget-content">
  <p>ドラッグしてください</p>
</div>

<div id="droppable" class="ui-widget-header">
  <p>ここにドロップ</p>
</div>

<script>
$(function() {
  $( "#draggable" ).draggable();
  $( "#droppable" ).droppable({
    drop: function( event, ui ) {
      $( this )
        .addClass( "ui-state-highlight" )
        .find( "p" )
          .html( "ドロップされました！" );
    }
  });
});
</script>

3. サイズ変更可能 (Resizable): 要素を自由に拡大縮小

**主な内容:**

• resizable() メソッドを解説し、HTML要素にサイズ変更機能を追加する方法を説明します。
• handles、aspectRatio、grid などのオプションを使い、サイズ変更動作を細かく調整する方法を解説します。
• resize イベントを通じて、サイズ変更中にカスタム処理を実行する方法を紹介します。
• containment オプションを使用して、サイズ変更可能な範囲を制限する方法を例示します。

<div id="resizable" class="ui-widget-content">
  <h3 class="ui-widget-header">サイズ変更可能</h3>
  <p>サイズを変更できます。</p>
</div>

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

4. 選択可能 (Selectable): 柔軟なターゲット選択

**主な内容:**

• selectable() メソッドの紹介と、HTML要素リスト内の項目を選択可能にする方法を解説します。
• filter、tolerance などのオプションを使い、選択可能なターゲットの絞り込みや選択規則を定義する方法を説明します。
• selected、selecting、unselecting などのイベントを利用し、選択中にカスタム処理を実行する方法を紹介します。

<ol id="selectable">
  <li class="ui-widget-content">項目 1</li>
  <li class="ui-widget-content">項目 2</li>
  <li class="ui-widget-content">項目 3</li>
  <li class="ui-widget-content">項目 4</li>
  <li class="ui-widget-content">項目 5</li>
  <li class="ui-widget-content">項目 6</li>
</ol>

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

5. 並べ替え可能 (Sortable): 要素の順番を簡単に変更

**主な内容:**

• sortable() メソッドを解説し、HTML要素リスト内の項目を並べ替え可能にする方法を説明します。
• placeholder、connectWith などのオプションを使い、並べ替え動作を細かくカスタマイズする方法を解説します。
• update、sort などのイベントを利用し、並べ替え中にカスタム処理を実行する方法を紹介します。

<ul id="sortable">
  <li class="ui-state-default">項目 1</li>
  <li class="ui-state-default">項目 2</li>
  <li class="ui-state-default">項目 3</li>
  <li class="ui-state-default">項目 4</li>
  <li class="ui-state-default">項目 5</li>
</ul>

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

まとめ

jQuery UIのインタラクションカテゴリに属する各APIの詳細と活用方法を理解することで、開発者は多様なユーザーインターフェースインタラクションを簡単に実装し、ユーザーエクスペリエンスを向上させることができます。

参考資料

• jQuery UI Draggable
• jQuery UI Droppable
• jQuery UI Resizable
• jQuery UI Selectable
• jQuery UI Sortable

Q&A