The fifth day of learning YUI.Ext--doing drag and drop Darg&Drop_YUI.Ext related

Drag&Drop an element Darg&Drop is an important feature when windows (windows) came out. Now we want to implement it in the browser, how to do it? Let’s look at the basic example first:

Copy the code The code is as follows:

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"] ; //Array stores the ID of DargDrop
Draggable = function(id, sGroup) {
//Create a DragDrop object. This must be called by a subclass of YAHOO.util.DragDrop
//Sets up the DragDrop object. Must be called in the constructor of any YAHOO.util.DragDrop subclass
this.init(id, sGroup);
  }                                                                                                                                                                  setStyle(this.getEl(), "opacity", 0.5);
} }
Draggable.prototype.endDrag = function(e) { //Return to the origin after dragging and dropping
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]);
}

}
} }
} (); 🎜>Points to note:

1. An array is used here to first collect all the elements to be DD (Darg&Drop, the same below), and then use for to traverse the new new YAHOO.util.DD() object, " Bundle" into a class of objects with the same properties: Draggable.

2. Encountered a problem that you can’t start with:

Use YUI to do Dragdrop. If your system has clearType enabled, the font will become fluffy after moving. It is estimated that there is an internal rendering problem in IE. I originally planned to use DDProxy instead, but once I used DDProxy, I couldn't inherit it.

3. You need to manually add the holder of xhtml. 🎜>


Copy code


The code is as follows:

var correct = { opt0:"ans1", opt1:"ans2", opt2:"ans0" } // Correct answer
var answer = { opt0:"tmp0", opt1:"tmp1" , opt2:"tmp2" } // Answer

// Pick points
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 ? "Qualified": "Unqualified") "：" score "%" ;
}

// Initialization
function init(event)
{

var dropzone = [ "ans0", "ans1", "ans2", ; // Answer column
"tmp0", "tmp1", "tmp2" ]; // Temporary place (where the flag starts to be placed)
for (id in dropzone) {
new YAHOO.util.DDT target(dropzone [ id]);
}


var draggable = [ "opt0", "opt1", "opt2" ]; // Optional options (national flag)

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中。有空再说。