0

ドキュメントに次のようなものを入力して、ページのどこかをマウスでクリックしてページ上の要素を作成します。

$("#sheet").append('<input class="elements" id="Button12" type="button" value="button" />');

しかし、しばらくクリック可能にしたくないので、無効にすることができます：

$(".elements").prop('disabled', true);

しかし、問題は、この要素をドラッグ可能にして、ページ上で移動できるようにしたいということです。これを試しましたが、機能しません:

$('.elements').draggable
({
    containment: "#frame",
    grid: [5,5]
})

クリックできない要素をドラッグできるようにするにはどうすればよいですか?

4

2 に答える 2

1 
$(".elements").children().prop('disabled', true);

する必要があります

$(".elements").prop('disabled', true);

.elementsボタンそのものだからです。

と

$("#sheet").append(<input class="elements" id="Button12" type="button" value="button" />);

する必要があります

$("#sheet").append('<input class="elements" id="Button12" type="button" value="button" />'); // missed quote

そして、あなたのdraggableコードは（そしてappend()ステートメントの後になければならない）べきだと思います

$('.elements').draggable
({
    containment: "#frame",
    grid: [5,5]
})
于 2012-06-23T07:04:43.513 に答える
1

通常、アニメーション化するとき、またはドラッグして別のコンテナーにラップするときは、フォーム要素を使用することをお勧めします。この場合、マウス イベントが無効な要素に登録されないため、別の要素を絶対位置およびより高い z インデックスに配置して、ラッピング コンテナーを満たし、無効な入力をカバーする挿入します。入力をカバーすることで、ドラッグのマウスダウンが内側のスパンで発生します。

var input='<span class="element_wrap"><span class="element_wrap_inner"></span>';
    input+='<input class="elements" id="Button12" type="button" value="button" disabled+"disabled" /></span>';

$("#sheet").append(input);

$('.elements_wrap').draggable({
    containment: "#frame",
    grid: [5,5]
});

適切なcssを適用します。入力を有効にするときは、内側のスパンを非表示にするか削除します

デモ: 簡単にするために無効なチェックボックスをクリックして使用 http://jsfiddle.net/KtP5K/

于 2012-06-23T07:58:23.560 に答える