Learn Yui.ext 5th-do drag-and-drop darg&drop_yui. Ext Related

Dragging and dropping an element darg&drop is an important feature of Windows (window) when it is published. Now we have to implement in the browser, how to do? Let's take a look at the basic examples:

Copy Code code 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"]; The array holds the ID of the Dargdrop
Draggable = function (ID, sgroup) {
Create a DragDrop object. This must be called by the YAHOO.util.DragDrop subclass
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 (); Inheriting a parent class
Draggable.prototype.startDrag = function (x, y) {
YAHOO.util.Dom.setStyle (This.getel (), "opacity", 0.5);
}
Draggable.prototype.endDrag = function (e) {//drag-and-drop to return to Origin
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]);
}

}
}
} ();

Notice of the place:

1. Here an array is used to collect all the elements to DD (Darg&drop, same below), then use for traversal of the new New YAHOO.util.DD () object, "bundled" into a class of objects with the same attributes: Draggable.

2. There is a problem that cannot be started:
Yui do DragDrop, if your system open ClearType, mobile font will be creepy, estimated IE internal render problem. Originally intended to replace with Ddproxy, but a ddproxy can not inherit.

3. You need to manually add XHTML holder.


Ok This example is here to pause to see some fun (demo):

Copy Code code as follows:

var correct = {opt0: "ans1", Opt1: "Ans2", Opt2: "ANS0"}//correct answer
var answer = {opt0: "Tmp0", Opt1: "Tmp1", Opt2: "TMP2"}//Answer

Adopt some
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 + "%";
}

Class
function init (event)
{

var dropzone = ["Ans0", "ans1", "ans2",//Answer Bar
"Tmp0", "Tmp1", "TMP2"]; Temporary place (where the flag is started)
For (ID in dropzone) {
New YAHOO.util.DDTarget (Dropzone[id]);
}


var draggable = ["Opt0", "opt1", "Opt2"]; Optional (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; Answer update
}
}

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]);
}

Bind button triggers event, calculates score
YAHOO.util.Event.addListener ("Submit", "click", Mark);
}

YAHOO.util.Event.addListener (window, "load", init);

If you post XHTML again, it will be long and annoying. Look at the DEMO.

Okay, here we are today, in serious OT. We'll talk about it sometime.