JavaScriptとjQueryでデスクトップアプリに負けない操作性のWebアプリケーションを作る

ドラッグアンドドロップ、マウス選択、パン、ズームなどができるWebアプリケーション

選択の処理

　選択とは、ユーザーがアプリケーション上で実行しようとするアクションの範囲を制限するために、アクションの対象となるエンティティを選ぶことです。デスクトップアプリケーションの場合、ユーザーは一般にアイテム自体をクリックするかボックス選択を使用することでアイテムを選択します。ボックス選択を行うときは、選択したい要素の周囲に四角形を描きます。

　ユーザーによる選択を実装するには、まずアイテムの選択状態を変更するための基本メソッドを公開するヘルパークラスSelectionManagerを定義します。

<script>
SelectionManager = function() {};
    
SelectionManager.prototype.select = function(id) {
  $('#' + id).addClass('ui-selected');
};

SelectionManager.prototype.unselect = function(id) {
  $('#' + id).removeClass('ui-selected');
};    
    
SelectionManager.prototype.isSelected = function(id) {
  return $('#' + id).hasClass('ui-selected');  
};
  
// Expose it as a global variable      
$sel = new SelectionManager();
</script>

　次に、クリックによる選択とボックス選択に応答する2つのjQueryコールバックを定義します。これらのコールバックのコードをリスト3に示します。図3はボックス選択を行っているときの様子です。

図3　ボックス選択で複数のアイテムを一緒に選択する：ドラッグ動作をスクロールレイヤからユニバースレイヤに伝達した結果。

リスト3　クリックによる選択とボックス選択に応答する2つのjQueryコールバック

<script>
$(document).ready(function() {
  // make all boxes aware of the double click,
  // that will select the item.
  $('.box').dblclick(function() {
    if ($sel.isSelected(this.id)) {
      $sel.unselect(this.id);
    } else {
      $sel.select(this.id);
    }
  });      
  
  // enhance the enclosing container to handle
  // box-selection. The filter attribute limits
  // the scope box-selection applies to.
  $('#container').selectable({
    selected: function(ev, ui) {
      if (ui.selected.id) {
        $sel.select(ui.selected.id);
      }
    },
    unselected: function(ev, ui) {
      if (ui.unselected.id) {
        $sel.unselect(ui.unselected.id);
      }
    },
    filter: '.box'
  });
});
</script>