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 }); } }
これで左テーブルからのドラッグ、右テーブル内でのドラッグができるようになる。