2

使用 JQuery，当元素都具有相同的 ID 时，我试图使多个元素可拖动。是否可以使用 JQuery 做到这一点？

（这里，有两个 id 为“可拖动”的 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 只能使用一次。

于 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

你应该使用classees，而不是复制ID。

<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 回答