Question

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

（这里有两个id为“draggable”的div，我想让它们都可以拖动。）

<!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>

Answer 1

HTML 页面中的

ID 应该是唯一的..

如果您提供重复的 ID 并将其用作选择器，则会始终选择遇到的第一个元素。So it will never work.

请尝试使用类。

您可以将名为draggable的班级提供给您想要拖动的所有元素。

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

<强> Check Fiddle

Answer 2

你必须使用一个班级。 ID应该只使用一次。

Answer 3

您的标记无效，因为ID必须是唯一的，但您可以使用此功能强制使用它（不推荐。）：

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

要选择具有可拖动类的所有元素，请按照与css样式表相同的方式进行操作。

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

jQuery选择器几乎完全模仿css选择器样式。如果您知道如何使用CSS选择元素，那么您就知道如何使用jQuery选择元素。

Answer 4

您应该使用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/

如果所有元素具有相同的ID，则使其可拖动

4 个答案: