ドラッグ＆ドロップとテーブルでスケジュール表を試作

HTMLのドラッグ＆ドロップとテーブルでスケジュール表を試作してみる。
xtestdrag02.html

• 右のスケジュール表に、左の表(内容は固定)の項目をドラッグ＆ドロップする

スケジュール表の左の列は時刻入力欄で、jQuery EasyUIのtimespinnerを使って、時刻以外は入力できないようにしている。また、スケジュール表内での項目移動も可能。

• 行挿入ボタンを押すと、すぐ下に1行追加する

挿入した行には、ボタンを押した行の10分後の時刻を設定する。例えば10：00の行の挿入ボタンを押すと、10：10が設定された行が新規挿入される。


• 行削除ボタンを押すと、その行を削除する
• 行情報ボタンを押すと、その行の情報を表示する

HTMLテーブルの行番号と、コードで割り当てた行idが異なる点に留意する。


• ゴミ箱にドラッグ＆ドロップすると、その項目を削除する
• パネル右上の情報ボタンを押すと、スケジュール表全体の情報を表示する



• ドラッグ＆ドロップ時に情報を引き渡す技

ドラッグ＆ドロップの際、元となる要素に「見えない情報」を付加することで、ドロップ側に情報を簡単に引き渡すことができる。例えば、’Tokyo’と表示された要素をドラッグする際、元の要素に表示されない要素を以下のように加えておく。

<!-- HTML -->
<tr>
  <td>
    <div class="item">Tokyo <!-- 表示する情報 -->
      <div class="hideClipProperty"> <!-- display:none -->
        <p>name_tokyo</p><p>id_tokyo</p> <!-- 表示しない情報-->
      </div>
    </div>
  </td>
</tr>

この例ではp要素で2つの情報(name_tokyo,id_tokyo)を設定している。これをドロップ側で次のように取り出す。

// JavaScript
onDrop: function(e, source){
   $(this).removeClass('over');
   var id = $(source).find('p:eq(0)').text(); // 最初の<p>要素
   var name = $(source).find('p:eq(1)').html(); // 次の<p>要素
   console.log('id:' + id + ' name:' + name);
}