拖放某个元素darg&drop是windows(视窗)问世时的一个重要特征。现在我们要在浏览器里面实现,怎么做呢?先看看基本例子:
复制代码 代码如下:
yahoo.example.ddapp = function() {
var dd;
return {
init2: function() {
// var dropzone =[dz];
// for(i in dropzone){
// new yahoo.util.ddtarget(dropzone[i]);
// };
var draggable =[dd_1,dd_2,dd_3]; //数组存放dargdrop的id
draggable = function(id, sgroup) {
//建立dragdrop对象。这个必须由yahoo.util.dragdrop的子类来调用
//sets up the dragdrop object. must be called in the constructor of any yahoo.util.dragdrop subclass
this.init(id, sgroup);
}
draggable.prototype = new yahoo.util.dd(); //继承父类
draggable.prototype.startdrag = function(x, y) {
yahoo.util.dom.setstyle(this.getel(), opacity, 0.5);
}
draggable.prototype.enddrag = function(e) { //拖放后返回原点
var draggable = this.getel();
yahoo.util.dom.setstyle(draggable, opacity, 1.0);
draggable.style.left = 0px;
draggable.style.top = 0px;
}
for(i in draggable){
new draggable(draggable[i]);
}
}
}
} ();
注意的地方:
1.这里用了一个数组先收集好所有要dd(darg&drop,下同)的元素,再用for遍历new new yahoo.util.dd()对象,“捆绑”成一类具有相同属性的对象:draggable。
2.遇到一个无法入手的问题:
用yui做dragdrop,如果你的系统开cleartype ,移动之后字体会发毛,估计ie内部render的问题 。本来打算用ddproxy代替,但一用ddproxy就无法继承下去。
3.需手工加入xhtml的holder.
ok这个例子暂告一段落,看看一些好玩的(演示):
复制代码 代码如下:
var correct = { opt0:ans1, opt1:ans2, opt2:ans0 } // 正确答案
var answer = { opt0:tmp0, opt1:tmp1, opt2:tmp2 } // 解答
// 採点
function mark(event)
{
var points = 0; //
var max = 3; //
for (key in correct) {
points += correct[key] == answer[key] ? 1: 0;
}
var score = math.floor(points / max * 100);
var result = document.getelementbyid(result);
result.innerhtml = (score > 70 ? 合格: 不合格) + : + score + %;
}
// 初始化
function init(event)
{
var dropzone = [ ans0, ans1, ans2, // 答案栏
tmp0, tmp1, tmp2 ]; // 临时地方(开始放国旗的地方)
for (id in dropzone) {
new yahoo.util.ddtarget(dropzone[id]);
}
var draggable = [ opt0, opt1, opt2 ]; // 可选项(国旗)
draggable = function(id, sgroup) {
this.init(id, sgroup);
}
draggable.prototype = new yahoo.util.dd();
draggable.prototype.canaccept = function(draggable, dropzone) {
if (dropzone.id.match(/^opt[012]$/)) {
return false;
}
for (key in answer) {
if (answer[key] == dropzone.id) {
return false;
}
}
return true;
}
draggable.prototype.startdrag = function(x, y) {
yahoo.util.dom.setstyle(this.getel(), opacity, 0.5);
}
draggable.prototype.ondragenter = function(e, id) {
var dropzone = yahoo.util.ddm.getelement(id);
var draggable = this.getel();
if (this.canaccept(draggable, dropzone)) {
dropzone.style.backgroundcolor = orange;
}
}
draggable.prototype.ondragout = function(e, id) {
var dropzone = yahoo.util.ddm.getelement(id);
dropzone.style.backgroundcolor = white;
}
draggable.prototype.ondragdrop = function(e, id) {
var dropzone = yahoo.util.ddm.getelement(id);
var draggable = this.getel();
if (this.canaccept(draggable, dropzone)) {
dropzone.style.backgroundcolor = white;
dropzone.appendchild(draggable);
answer[draggable.id] = dropzone.id; // 解答更新
}
}
draggable.prototype.enddrag = function(e) {
var draggable = this.getel();
yahoo.util.dom.setstyle(draggable, opacity, 1.0);
draggable.style.left = 0px;
draggable.style.top = 0px;
}
for (id in draggable) {
new draggable(draggable[id]);
}
// 绑定按钮触发事件,计算成绩
yahoo.util.event.addlistener(submit, click, mark);
}
yahoo.util.event.addlistener(window, load, init);
如果再把xhtml贴出来,很长 很烦 。look look demo.
好,今天到这儿,严重ot中。有空再说。