Mootools :`checkbox '에 따라`var drag`을 어떻게 체크하지 않았습니까?

Question

Mootools : 허용 및 거부 방법 var drag에 따라 checkbox을 확인 했습니까?

window.addEvent('domready',function() { 
    var z = 2; 
    $$('#dragable').each(function(e) { 
    var drag = new Drag.Move(e,{ 
     grid: false, 
     preventDefault: true, 
     onStart: function() { 
     e.setStyle('z-index',z++); 
     } 
    }); 
    }); 
}); 
function check(tag){ 
    if(tag.checked){ 
    //checkbox checked 
    //How to Disallow Drag.Move for #dragable ? 
    //Unfortunately so it does not work - drag.destroy(); drag.removeEvents(); 
    }else{ 
    //How to Allow Drag.Move for #dragable ? 
    } 
} 
<input type="checkbox" onClick="check(this);"> 
<div id="dragable">Drag-able DIV</div> 

고마워요!

Answer 1

Element Store에 Drag의 인스턴스를 저장하십시오. 확인란을 클릭하면이 인스턴스를 검색하고 조작 할 수 있습니다.

Drag.Move

는 기본 Drag 클래스의 확장이며, 당신이 문서를 볼 경우, 당신은이 상황에 대한 두 가지 방법이있다 알 수 있습니다 :

• attach
• detach

당신을 드래그를 활성화 또는 비활성화하려면 new Drag.Move(..)을 호출 할 때 생성되는 드래그 객체에 대해이 메소드를 호출해야합니다.

var drag = new Drag.Move(e, { 
    ... 
}); 

을 그리고 나중에 검색을 위해 요소 스토어 내부의이 drag 객체의 참조를 저장 :

당신이 이미하고있는 그래서 먼저 드래그 개체를 만듭니다.

e.store('Drag', drag); 

당신은 당신이 원하는 키를 사용할 수 있습니다 - 나는 "Drag"을 사용했습니다.

그런 다음 나중에 체크 기능에서 끌기 개체를 검색하고 체크 상자의 상태에 따라 attach 또는 detach을 호출하십시오.

function check(elem) { 
    var drag = elem.retrieve('Drag'); // retrieve the instance we stored before 

    if(elem.checked) { 
     drag.detach(); // disable dragging 
    } 
    else { 
     drag.attach(); // enable dragging 
    } 
} 

example이 확인란을 사용하도록 수정되었습니다.

참고로 id로 요소를 검색하는 경우 $$을 사용할 필요가 없습니다. 이상적으로 해당 ID가있는 요소 만 있어야합니다. $$("#dragable")은 너무 중복되어 성능이 떨어집니다. 대신 document.id('dragable') 또는 $("dragable")을 사용하십시오.