YUI3 PR1試用 - 用drag&drop做出填充題
Sat, 01 Nov 2008 00:00:26 +0800恩，其實是用YUI的範例改的，然後稍微調整成我想要做的例子，順便也理解一下drag&drop模組的運用。
廢話不多說，先來看寫好的例子，是一個填充題，可以把答案拖曳到空格中，最後檢查算出分數。
<html>
<style>
.cls1 {border: solid 1px black;cursor:move; font-size: 13px}
.cls2 {text-decoration: underline;}
</style>
<script src="build/yui/yui-min.js"></script>
<script>
var quiz = {
quiz1: 'the feast of Crispian',
quiz2: 'then shall our names',
quiz3: 'band of brothers'
};
</script>
<body>
<div>
<script>
(function(){
for(var i in quiz) {
document.write("<span class="cls1" id=""+i+"">"+quiz[i]+"</span> ");
}
})();
</script>
</div><br>
<div><input type="button" id="check" value="check" style="visibility:hidden"></div><br>
<div style="font-size:13px">
This day is called <span class="cls2" id="quiz1a"> </span>:<br>
He that outlives this day, and comes safe home,<br>
Will stand a tip-toe when the day is named,<br>
And rouse him at the name of Crispian.<br>
He that shall live this day, and see old age,<br>
Will yearly on the vigil feast his neighbours,<br>
And say 'To-morrow is Saint Crispian:'<br>
Then will he strip his sleeve and show his scars.<br>
And say 'These wounds I had on Crispin's day.'<br>
Old men forget: yet all shall be forgot,<br>
But he'll remember with advantages<br>
What feats he did that day: <span class="cls2" id="quiz2a"> </span>.<br>
Familiar in his mouth as household words<br>
Harry the king, Bedford and Exeter,<br>
Warwick and Talbot, Salisbury and Gloucester,<br>
Be in their flowing cups freshly remember'd.<br>
This story shall the good man teach his son;<br>
And Crispin Crispian shall ne'er go by,<br>
From this day to the ending of the world,<br>
But we in it shall be remember'd;<br>
We few, we happy few, we <span class="cls2" id="quiz3a"> </span>;<br>
For he to-day that sheds his blood with me<br>
Shall be my brother; be he ne'er so vile,<br>
This day shall gentle his condition:<br>
And gentlemen in England now a-bed<br>
Shall think themselves accursed they were not here,<br>
And hold their manhoods cheap whiles any speaks<br>
That fought with us upon Saint Crispin's day.
</div>
<script>
YUI().use('dd-drop','dd-proxy',function(Y){
var nodes = Y.all('.cls1');
Y.each(nodes,function(v, k, items) {
var drag = new Y.DD.Drag({
node: items.item(k),
groups: ['one'],
proxy: true,
dragMode: 'intersect',
moveOnEnd: false
});
drag.on('drag:start', function() {
var p = this.get('dragNode');
var n = this.get('node');
n.setStyle('opacity', .25);
p.set('innerHTML', n.get('innerHTML'));
p.setStyle('opacity', .65);
p.setStyle('fontSize', '13px');
});
drag.on('drag:end', function() {
var n = this.get('node');
n.setStyle('opacity', 1);
});
drag.on('drag:drophit', function(e) {
e.drop.get('node').set('innerHTML', this.get('node').get('innerHTML'));
this.removeFromGroup('one');
this.get('node').setStyle('display','none');
Y.get('#check').setStyle('visibility', 'visible');
});
});
var places = Y.all('.cls2');
Y.each(places,function(v, k, items) {
var drop = new Y.DD.Drop({
node: items.item(k),
groups: ['one']
});
});
Y.get('#check').on('click', function(e) {
var result = 0;
Y.each(places, function(v, k, items) {
if(v.get('innerHTML') == quiz[v.get('id').substring(0, v.get('id').length-1)]) result++;
});
alert("You got " + result + " points");
});
});
</script>
</body>
</html>
有興趣可以到這個連結看看：http://www.fillano.idv.tw/test342.html
要產生可drag的物件，只要用Y.DD.Drag，把一些設定以及node傳給他的constructor（上例的var drag=new Y.DD.Drag(.....)）。Drop也差不多。
使用proxy可以做出一個隨著滑鼠拖曳的proxy，同一個group的drag物件拖曳到drop物件上，就會發生drag:drophit事件（這是在drag-drop裡面定義的）。其他的還有拖曳開始後，拖曳結束後的一些事件處理。簡單寫幾行就可以做出來了。