1

要素で JQuery Draggable のオン/オフを切り替えるコード ブロック (以下) を作成しました。つまり、buttonという div をクリックすると、 dragBlockという別のdivでドラッグ可能な効果のオン/オフが切り替わります。

これにはしばらく時間がかかりましたが、最終的に機能するようになりました。私が持っている質問は、以下のコードが 1 つのDraggableインスタンスだけで機能しない理由がわかりません。主に状態引数を使用するもの。

$(dragBlock ).draggable(state);

代わりに、これを使用した場合にのみ機能します。

$(dragBlock ).draggable(state);
$(dragBlock ).draggable();           // This line is needed for the code to work. Why?

これは大きな問題ではありませんが、これがなぜなのか知りたいのですが、ここの誰かが説明できると思います. JSfiddleはこちら:

コードは以下のとおりです。

$(document).ready(function() {
   var state = "disable";
   var button = document.getElementById("button");
   var dragBlock = document.getElementById("dragBlock");
   var toggle = function() {

   if (state==="enable") {
       state = "disable";
   }
   else if(state==="disable") {
       state = "enable";
   }

   $(dragBlock ).draggable(state);
   $(dragBlock ).draggable();           // This line is needed for the code to work. Why?
   console.log(state);
};
  button.addEventListener("click", toggle, false);
});
4

1 に答える 1

6

実際には.draggable()、イベント ハンドラーの外側と.draggable(state)内側のみが必要です。

呼び出し.draggable()は、要素にドラッグ可能な機能を最初に設定する方法です。

.draggable('enable')orの呼び出し.draggable('disable')は、構成済みのドラッグ可能な要素を有効または無効にする方法です。セットアップ済みのドラッグ可能な要素を操作する方法です。

ただし、イベント ハンドラの外で draggable() を呼び出すと、デフォルトの初期状態は になりますenabled。すぐに無効にするか、state変数の初期値を変更する必要があります。

ドラッグ可能を初期化し、これで無効のままにすることができます（イベントハンドラーの外で）

('#dragBlock').draggable({disabled: true});

そして.draggable(state)、イベント ハンドラーの内部のみが必要になります。

于 2013-06-03T03:40:48.193 に答える