学习YUI.Ext第五日--做拖放Darg&Drop_YUI.Ext相关-JS Tutorial-php.cn

拖放某个元素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);