2

JQuery を使用して、すべての要素が同じ ID を持つ場合、複数の要素をドラッグ可能にしようとしています。JQueryを使用してこれを行うことは可能ですか?

(ここでは、「ドラッグ可能」という ID を持つ 2 つの div があり、両方をドラッグ可能にしたいと考えています。)

関連するコードはこちら: http://jsfiddle.net/zcJwu/

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Draggable - Default functionality</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css" />
    <style>
    #draggable { width: 150px; height: 150px; padding: 0.5em; }
    </style>
    <script>
    $(function() {
        $( "#draggable" ).draggable();
    });
    </script>
</head>
<body>

<div id="draggable" class="ui-widget-content">
    <p>Drag me around</p>
</div>
<div id="draggable" class="ui-widget-content">
    <p>Drag me around</p>
</div>


</body>
</html>​
4

4 に答える 4

11

HTMLページの IDは一意である必要があります。

重複したIDを指定してそれをセレクターとして使用すると、最初に検出された要素が常に選択されます。So it will never work.

代わりにクラスを使用してみてください。

draggableドラッグするすべての要素に呼び出されるクラスを与えることができます。

$( ".draggable" ).draggable();

フィドルをチェック

于 2012-12-05T17:47:57.390 に答える
5

クラスを使用する必要があります。ID は 1 回だけ使用する必要があります。

于 2012-12-05T17:47:49.777 に答える
2

ID は一意である必要があるため、マークアップは無効ですが、これを使用して力ずくで動作させることができます (推奨されません)。

$("[id=draggable]").draggable()

ドラッグ可能なクラスを持つすべての要素を選択するには、css スタイルシートの場合と同じ方法で行います。

$(".draggable").draggable();

jQuery セレクターは、css セレクター スタイルをほぼ正確に模倣します。CSS で要素を選択する方法を知っている場合は、jQuery で要素を選択する方法を知っています。

于 2012-12-05T17:49:39.290 に答える
2

ID を複製する代わりに、classees を使用する必要があります。

<style>
.draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>
<script>
$(function() {
    $( ".draggable" ).draggable();
});
</script>
<div id="draggable1" class="ui-widget-content draggable">
    <p>Drag me around</p>
</div>
<div id="draggable2" class="ui-widget-content draggable">
    <p>Drag me around</p>
</div>

更新されたフィドルを確認してください http://jsfiddle.net/zcJwu/2/

于 2012-12-05T17:53:13.017 に答える