Ajax JavaScript Framework の
Ext JS 2.0
を使用して作成した、ドラッグ＆ドロップのサンプルです。
Ext JS は、Yahoo! UI, jQuery, Prototype といった、他の Framework と組み合わせて使うことが出来ますが、
今回のサンプルでは、他の Framework とは組み合わせずに、すべて Ext JS でまかなっています。
サンプルについて、ブラウザごとの動作確認結果は Drag & Drop (Ajax JavaScript) にまとめてあります。
Demo
問題．次の表をドラッグ＆ドロップにより完成させてください。
| オリンピック |
開催国 |
2004年（夏季）
アテネ |
|
2006年（冬季）
トリノ |
|
2008年（夏季）
ペキン |
|
|
|
ソースコード
ここでは JavaScript のみ掲載します。
CSS と HTML については「Drag & Drop - 共通ソース（CSS, HTML）」
全ソースコード
を参照してください。
以下の「Ext JS の読み込み」では ext.js を読み込んでいますが、これは必要なモジュールだけをビルドしたものです。
ビルド方法については、次のセクション Ext JS のビルド方法 を参照してください。
Ext JS の読み込み
<!--
<script type="text/javascript" src="/usr/lib/extjs/2.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/usr/lib/extjs/2.0/ext-all.js"></script>
-->
<script type="text/javascript" src="/usr/lib/extjs/2.0/ext.js"></script> |
JavaScript
<script type="text/javascript">
//<![CDATA[
(function() {
var correct = { opt0: 'ans1', opt1: 'ans2', opt2: 'ans0' } // 正解
var mark = function(event) {
var points = 0;
var max = 0;
for (key in correct) {
var answer = Ext.get(key).dom.parentNode.id;
points += (correct[key] == answer) ? 1: 0;
++max;
}
var score = Math.floor(points / max * 100);
var judge = (score >= 70) ? '合格': '不合格';
Ext.get('result').dom.innerHTML = judge + '：' + score + '%';
}
Ext.override(Ext.dd.DD, {
startDrag: function(x, y) {
Ext.get(this.getEl()).applyStyles({ opacity: 0.5, zIndex: 1 });
},
endDrag: function(e) {
Ext.get(this.getEl()).applyStyles({ opacity: 1.0, zIndex: 0 })
.applyStyles({ left: 0, top: 0 });
},
onDragEnter: function(e, id) {
Ext.get(id).addClass('dragenter');
},
onDragOut: function(e, id) {
Ext.get(id).removeClass('dragenter')
},
onDragDrop: function(e, id) {
var drop = Ext.get(id).removeClass('dragenter');
if (drop.query('.draggable').length == 0) {
drop.appendChild(
Ext.get(this.getEl()).applyStyles({ left: 0, top: 0 })
);
}
}
});
Ext.onReady(function() {
Ext.select('.dropzone').each(function(elm) {
new Ext.dd.DDTarget(elm.dom.id);
});
Ext.select('.draggable').each(function(elm) {
elm.applyStyles({ left: 0, top: 0 });
new Ext.dd.DD(elm.dom.id).isTarget = false;
});
Ext.get('submit').on('click', mark);
Ext.get('wait').applyStyles({ display: 'none' })
});
}());
//]]>
</script> |
Ext JS のビルド方法
Ext JS をビルドするには、
Build your own Ext 2.0
でウィザード形式で進めます。
操作箇所を ハイライト で示します。
Choose a Library
◎ No Adapter (Ext Stand-alone)
○ Yahoo UI!
○ jQuery
○ Prototype/Scriptaculous
[ Next >> ]
Choose Components and Classes
☑ Ext Core (Required)
☐ .....
☑ Core - Drag and Drop
☐ .....
[ << Back ] [ Build It! ]
以上で、ext.js のダウンロードが始まります。
