YUI.Ext 학습 5일차 - Darg&Drop_YUI.Ext 관련 드래그 앤 드롭하기

요소 Drag&Drop 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의 하위 클래스에 의해 호출되어야 합니다.
//DragDrop 개체를 설정합니다. YAHOO.util.DragDrop 하위 클래스의 생성자에서 호출되어야 합니다.
this.init(id, sGroup); ???                                               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"; top = "0px";
}
for(i in draggable){
new Draggable(draggable[i])
}

}
} }
} (); 🎜>참고 사항:

1. 여기에서는 먼저 DD(Darg&Drop, 아래 동일)가 될 모든 요소를 ​​수집한 다음 for를 사용하여 새 항목을 순회합니다. YAHOO.util.DD() 객체, "번들"을 동일한 속성을 가진 객체 클래스로 묶음: 드래그 가능.

2. 시작할 수 없는 문제가 발생했습니다.
YUI를 사용하여 Dragdrop을 사용하는 경우, 이동 후 글꼴이 흐려지는 것으로 추정됩니다. IE 내부 렌더링 문제. 원래는 DDProxy를 대신 사용할 계획이었지만 DDProxy를 사용한 후에는 상속할 수 없었습니다.

3.xhtml의 홀더를 수동으로 추가해야 합니다. 🎜>

코드 복사


코드는 다음과 같습니다.

var right = { 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 right) {
points = 올바른[key] == 대답[key] ? 1: 0
}
var Score = Math.floor(points / max * 100);
var result = document.getElementById("result");
result.innerHTML = (점수 > 70 ? "Qualified": "Unqualified") "：" 점수 "%" ;
}

// 초기화
function init(event)
{

var dropzone = [ "ans0", "ans1", "ans2", // 응답 열
"tmp0", "tmp1", "tmp2" ]; // 임시 장소(플래그가 배치되기 시작하는 위치)
for (dropzone의 ID) {
new YAHOO.util.DDT target(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 (답변의 키) {
if (answer[key] == dropzone.id) {
return false
} }
}
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(); canAccept(드래그 가능, dropzone ) ) {
             dropzone.style.groundColor  = "주황색";                                    

    Draggable.prototype.onDragOut = function(e, id) { 
        var dropzone = YAHOO.util.DDM.getElement(id); 
        dropzone.style.BackgroundColor = "흰색"; 
    } 

    Draggable.prototype.onDragDrop = function(e, id) { 
        var dropzone = YAHOO.util.DDM.getElement(id); 
        var 드래그 가능 = this.getEl(); 
        if (this.canAccept(draggable, dropzone)) { 
            dropzone.style.BackgroundColor = "white"; 
            dropzone.appendChild(드래그 가능); 
            답변[draggable.id] = dropzone.id;         // 解答更新 
        } 
    } 

    Draggable.prototype.endDrag = function(e) { 
        var draggable = this.getEl(); 
        YAHOO.util.Dom.setStyle(드래그 가능, "불투명도", 1.0); 
        draggable.style.left = "0px"; 
        draggable.style.top  = "0px"; 
    } 

    for (id in draggable) { 
        new Draggable(draggable[id]); 
    } 

    // 绑定按钮触发事件，计算成绩 
    YAHOO.util.Event.addListener("제출", "클릭", 마크); 
} 

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

       如果再把xhtml贴出来，很长 很烦 。look demo.

好，今天到这儿，严这儿，严说中。有空再说。