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

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

2009/12/19

Ext JS－ドラッグ＆ドロップ

この本に載っていたExt JSのドラッグ＆ドロップをやってみました。

JavaScript部分


new Ext.dd.DragSource("dragMe");
new Ext.dd.DropTarget("dropHere", {
  notifyDrop: function() { 
    document.getElementById("dropHere").value = document.getElementById("dragMe").value;
    return true;
  }
});

HTML部分


<body>
  <input type="text" id="dragMe">　　
  <input type="text" id="dropHere">
</body>

左右に1つずつtextBoxがあって、左側のtextBoxをドラッグして、右側のtextBoxにドロップすると、左側のtextBoxの内容が右側のtextBoxにコピーされるという単純なものです。大事な点は、notifyDropのfunctionでtrueを返すこと。

下にドラッグ＆ドロップ実行中の図を貼ってみました。上からドラッグ前、ドラッグ中（右側のtextBoxに達する前）、ドラッグ中（右側のtextBoxに達した時）、ドロップ完了です。

Prototype.js（script.aculo.us）の時はドラッグ中の見栄えが悪かったのですが、これはなかなかのものです。