Mootools：如何根據勾選的複選框禁止`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

在MooTools 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")。