DragListGroup のドラッグ & ドロップ・イベントを監視する

goog.fx.DragListGroup は dragListElement として追加したノードに含まれる DOM 要素群を、ドラッグアンドドロップで位置交換できるようにするクラスです。
DragListGroup で発生したドラッグ・イベントは、draglistgroup.js の goog.fx.DragListGroup.EventType に定義されているイベントタイプを listen することでキャッチすることができます。

// イベントタイプ
goog.fx.DragListGroup.EventType = {
  BEFOREDRAGSTART: 'beforedragstart',
  DRAGSTART: 'dragstart',
  BEFOREDRAGMOVE: 'beforedragmove',
  DRAGMOVE: 'dragmove',
  BEFOREDRAGEND: 'beforedragend',
  DRAGEND: 'dragend'
};

以下に DragListGroup のイベント監視例を示します。

<!-- HTML -->
<div id="content">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>

goog.require('goog.fx.DragListGroup');
goog.require('goog.events');
goog.require('goog.dom');

var $ = goog.dom.getElement;

// Set up a DragListGroup
var dlg = new goog.fx.DragListGroup();
dlg.setDragItemHoverClass('cursor_move');  // ホバー時に追加するクラス
dlg.setDraggerElClass('cursor_move opacity_40');  // ドラッグ時に追加するクラス
dlg.addDragList($('content'), goog.fx.DragListDirection.DOWN);  // dragListElement と方向
dlg.init();  // 初期化

// イベント監視登録
// Before drag start
goog.events.listen(dlg, 
                   goog.fx.DragListGroup.EventType.BEFOREDRAGSTART, 
                   function (e) {
                       console.log('Before drag start');
                       // 
                       // 'return false;' で一連のドラッグ処理をキャンセルできる
                       // 
                   });
// Drag start
goog.events.listen(dlg, 
                   goog.fx.DragListGroup.EventType.DRAGSTART, 
                   function (e) {
                       console.log('Drag start');
                   });
// Before drag move
goog.events.listen(dlg, 
                   goog.fx.DragListGroup.EventType.BEFOREDRAGMOVE, 
                   function (e) {
                       console.log('Before drag move');
                   });
// Drag move
goog.events.listen(dlg, 
                   goog.fx.DragListGroup.EventType.DRAGMOVE, 
                   function (e) {
                       console.log('Drag move');
                   });
// Before drag end
goog.events.listen(dlg, 
                   goog.fx.DragListGroup.EventType.BEFOREDRAGEND, 
                   function (e) {
                       console.log('Before drag end');
                   });
// Drag end
goog.events.listen(dlg, 
                   goog.fx.DragListGroup.EventType.DRAGEND, 
                   function (e) {
                       console.log('Drag end');
                   });

最初は DragListGroup を継承してイベント処理しようとしましたが、ちゃんと EventType が定義されていることが分かりました。

Google API Expertが解説する Closure Libraryプログラミングガイド