チェックボックスに応じて `var drag`を許可する方法

Question

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>

.

Answer 1

MOOTOOLS 要素store その場合チェックボックスをクリックすると、このインスタンスを取得して操作できます。

drag.move は、ベースへの拡張子ですドラッグクラスをドラッグすると、ドキュメントが表示されたら、この状況には2つのメソッドがあります。

• 添付
• detech

ドラッグを有効または無効にするために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')を使用してください。