サラリーマンのすらすらＩＴ日記

株式会社ソーキがリリースしましたERPソフト"透明幹"のご紹介や、IT関連を中心とした日々を綴ります。

2009/12/21

Ext JS－ドラッグ＆ドロップその2

前回のドラッグ＆ドロップの例は簡単でしたので、もう少し複雑なのをやってみました。これも前回と同じ本に載っています。

JavaScript部分


new Ext.dd.DragZone("today");
new Ext.dd.DragZone("tmrw");
var drags = document.getElementsByTagName('li');
for (var i=0; i<drags.length; i++) {
  Ext.dd.Registry.register(drags[i]);
}
var cfg = { onNodeDrop: drop };
new Ext.dd.DropZone('tmrw', cfg);
new Ext.dd.DropZone('today', cfg);

function drop(dropNodeData, source, event, dragNodeData) {
  var dragged = source.dragData.ddel;
  var sourceContainer = source.el.dom;
  var destinationContainer = this.getEl();
  sourceContainer.removeChild(dragged);
  destinationContainer.appendChild(dragged);
  return true;
}

HTML部分


<body>
    <h1>　今日の予定</h1>
    <ul id="today">
      <li>　　ショッピング</li>
      <li>　　ヘアカット</li>
    </ul>
    <br>
    <h1>　明日の予定</h1>
    <ul id="tmrw">
      <li>　　洗車</li>
      <li>　　勉強</li>
    </ul>
</body>

初期画面はこのようなものです。