チェックボックスに応じて `var drag`を許可する方法
-
13-09-2020 - |
質問
mootools :var drag
チェックまたはnot?/ P>
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>
. 解決
MOOTOOLS 要素store その場合チェックボックスをクリックすると、このインスタンスを取得して操作できます。
drag.move は、ベースへの拡張子ですドラッグクラスをドラッグすると、ドキュメントが表示されたら、この状況には2つのメソッドがあります。
ドラッグを有効または無効にするためにDrag
を呼び出すときに作成されるドラッグオブジェクトでこれらのメソッドを呼び出す必要があります。
だから最初にDrag Objectを作成しているときにドラッグオブジェクトを作成します。
var drag = new Drag.Move(e, {
...
});
.
その後、後で検索するためにこのnew Drag.Move(..)
オブジェクトの参照を要素ストア内に格納します。
e.store('Drag', drag);
.
あなたがここに欲しい任意のキーを使うことができます - 私はdrag
を使用しました。
後でチェック機能の後半で、ドラッグオブジェクトを取得し、チェックボックスの状態に応じて"Drag"
またはattach
を呼び出します。
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
}
}
.
例このチェックボックスをオンにしてください。
サイドノートの場合、IDによって要素を取得している場合は、理想的にはそのIDを持つ要素のみがあるべきであるため、detach
を使用する必要はありません。 $$
は冗長性が高く、パフォーマンスが低いだけです。代わりに$$("#dragable")
またはdocument.id('dragable')
を使用してください。
所属していません StackOverflow