jQuery EasyUIのdraggable/droppableを使う

jQuery EasyUIのdraggable/droppableを使って、アイテムのドラッグ＆ドロップ機能を実現する。

実行例：

この例では、左の「clip spot」にあるスポット(Tokyo,Osaka…)を、右の「visit list」にドラッグ＆ドロップする。また、下にあるゴミ箱の枠に動かすことで削除することができる。

• ドラッグされる側

今回はテーブルのtd要素をドラッグできるようにする。対象となる要素にclass名itemを設定する。(クラス名は任意でOK。)

<!-- HTML -->
<div class="leftTbl">
    <table id="tblClipList">
        <tr><th>clip spot</th></tr>
        <tr><td><div class="item">Tokyo</div></td></tr>
        <tr><td><div class="item">Osaka</div></td></tr>
    </table>
</div>

// JavaScript
$('.leftTbl .item').draggable({ // 対象は左テーブルのクラスitem要素
   revert: true, // ドラッグを中止したら元の場所に戻る
   proxy: 'clone', // 元の要素のコピーを用意する(？)
   onStartDrag:function(){ // ドラッグ開始時のイベントハンドラ
   // カーソルを変更する
      $(this).draggable('options').cursor = 'not-allowed';
   }
});

• ドロップされる側(ドラッグ要素が入った/出た)

<!-- HTML --> 
<!-- <table><tr>... -->
<td class="drop"></td>

ドロップ可能な領域を用意する。この場合はテーブルのtd要素にしているが何でもOK。さらにmustではないが、この領域に対しcssで見た目を調整する。

/* css */
.rightTbl td.drop { background:#fafafa;width:100px;} /* Gray98 */
.rightTbl td.over { background:#FBEC88; } /* 黄色 */

// JavaScript
onDragEnter: function(){ // ドラッグしている要素がドロップ可能な領域に入った
   $(this).addClass('over'); // 色を変える
},
onDragLeave: function(){ // ドラッグしている要素がドロップ可能な領域を出た
   $(this).removeClass('over');
},

これで、ドラッグした要素がドロップ可能な領域に入ったときは背景が黄色になり、領域を出たときは元に戻る。

• ドロップされる側(要素をドロップしたとき)

// JavaScript
onDrop: function(e, source){
   $(this).removeClass('over');
   if ($(source).hasClass('assigned')) { // 左テーブルからドラッグしてきたとき
      $(this).append(source); // ドラッグ要素をtd要素に追加
   }
   else { // すでに右テーブルにある要素をドラッグしたとき
      // (1)ドラッグ要素をコピーし(2)assignedクラスを設定
      var c = $(source).clone().addClass('assigned');
      // (3)ドラッグ要素をtd要素に追加
      $(this).empty().append(c);
      c.draggable({
         revert: true
      });
   }
}

これで左テーブルからのドラッグ、右テーブル内でのドラッグができるようになる。

• 実行例

・ドラッグ中

・ドロップ可能領域に入った

・ドロップ実行済