サラリーマンのすらすらIT日記

IT関連を中心とした日々を綴ります。
--/--/--

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
2009/12/24

Ext JS-ドラッグ&ドロップその3

Ext JSの本に書いてあったドラッグ&ドロップのサンプルをやってみました。

CSS部分

/* Style for a drop zone container. */
.cssDDContainer {
border : 1px solid #000000;
width : 200px;
height : 600px;
background-color : #d0d0ff;
overflow : auto;
margin : 2px;
}
/* Style for a draggable item. */
.cssDDItem {
font-size : 8pt;
font-weight : hold;
font-family : arial;
margin : 2px;
border : 1px solid #000000;
background-color : #ffd0d0;
padding : 1px;
cursor : move;
z-index : 9999;
}
/* Style for when an item is hovering over a drop target. */
.cssDDHover {
background-color : #c0ffc0;
}



JavaScript部分

var presidents = [ "George Washington", "John Adams", "Thomas Jefferson",
"James Madison", "James Monroe", "John Quincy Adams", "Andrew Jackson",
"Martin Van Buren", "William Harrison", "John Tyler", "James Polk",
"Zachary Taylor", "Millard Fillmore", "Franklin Pierce",
"James Buchaman", "Abraham Lincoln", "Andrew Johnson",
"Ulysses S. Grant", "Rutherford B. Hayes", "James Garfield",
"Chester A. Arthur", "Grover Cleveland", "Benjamin Harrison",
"Grover Cleveland", "William McKinley", "Theodore Roosebelt",
"William Howard Taft", "Woodrow Wilson", "Warren Harding",
"Calvin Coolidge", "Herbert Hoover", "Franklin Delano Roosebelt",
"Harry S. Truman", "Dwight D. Eisenhower", "John F. Kennedy",
"Lyndon B. Johnson", "Richard Milhous Nixon", "Gerald Ford",
"Kimmy Carter", "Ronald Reagan", "George Bush", "Bill Clinton",
"George W. Bush"
];

// Override drag-and-drop events as necessary
Ext.override(Ext.dd.DDProxy, {
// Event when the user starts dragging an item.
startDrag: function(inX, inY) {
// Show contents of item when dragging so it looks nicer.
var item = Ext.get(this.getDragEl());
var el = Ext.get(this.getEl());
item.update(el.dom.innerHTML);
item.addClass(el.dom.className + " dd-proxy");
},
// Event when an item hovers over a drop target.
onDragOver: function(inElement, inTargetID) {
// Only do something if item is over the drop target.
if (inTargetID == "destinationContainer") {
// Record this as the drop target for when dragging stops.
var dropTarget = Ext.get(inTargetID);
this.lastTarget = dropTarget;
// Style the drop target.
dropTarget.addClass("cssDDHover");
}
},
// Event when an item leaves a drop target.
onDragOut: function(inElement, inTargetID) {
// Clear the recorded drop target
this.lastTarget = null;
if (inTargetID == "destinationContainer") {
// If leaving the destination container, remove the hover style.
Ext.get(inTargetID).removeClass("cssDDHover");
}
},
// Event when the user stops dragging an item.
endDrag: function() {
// Only do something if the item is over a drop target.
if (this.lastTarget) {
// Append the item to the drop target and remove the style.
var item = Ext.get(this.getEl());
Ext.get(this.lastTarget).appendChild(item);
this.lastTarget.removeClass("cssDDHover");
this.lastTarget = null;
}
}
});

function appInit() {
// Create items that can be dragged and insert them into the DOM.
var presidentsContainer = Ext.getDom("sourceContainer");
for ( var i=0; i<presidents.length; i++) {
var newDiv = document.createElement("div");
newDiv.className = "cssDDItem";
newDiv.id = "president" + i;
newDiv.innerHTML = presidents[i];
presidentsContainer.appendChild(newDiv);
var divElem = Ext.getDom("president" + i);
divElem.dd = new Ext.dd.DDProxy("president" + i);
}
// Register drop zone.
var dz2 = new Ext.dd.DropZone("destinationContainer");
} // End appInit();

Ext.onReady(appInit);


HTML部分

<body>
<div style="position:absolute;left:2px;top:2px;">
<center><h2>U.S. Presidents</h2></center>
<div class="cssDDContainer" id="sourceContainer"></div>
</div>

<div style="position:absolute;left:230px;top:2px;">
<center><h2>The ones I like</h2></center>
<div class="cssDDContainer" id="destinationContainer"></div>
</div>
</body>


初期画面です。

左側に米国歴代大統領の名前の一覧があって、その中で好きな人を右側にドラッグ&ドロップで移動します。

移動中の画面です。


なかなか見栄えのよい画面作りの例が挙げられています。本には2カ所ほどコードの間違いがあったので、直しておきました。

スポンサーサイト

コメント

コメントの投稿

  • URL
  • コメント
  • パスワード
  • 秘密
  • 管理者にだけ表示を許可する

トラックバック

トラックバックURL:http://sookibizviz.blog81.fc2.com/tb.php/322-d06827aa

■  カレンダー

05 | 2017/06 | 07
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -

■  プロフィール

sookibizviz

Author:sookibizviz
仕事の内容やソフトの紹介を交えながら、日々の悪戦苦闘を綴っていきます。

■  最新記事

■  最新コメント

■  最新トラックバック

■  月別アーカイブ

■  カテゴリ

未分類 (64)
BizViz (24)
IT (1119)
計量 (76)
環境 (26)
数学 (181)
ニュース (46)
本 (187)
音楽 (113)
囲碁 (5)
将棋 (26)
ブログ (14)
日記 (19)

■  FC2カウンター

■  検索フォーム

■  RSSリンクの表示

■  QRコード

QRコード
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。