javascript - 允许使用 jQuery 拖动具有相同 id 的对象

Question

我创建了以下 jQuery 代码以允许对象可拖动：

JavaScript：

$(function(){
    $("#drag_item").draggable();
});

HTML：

<div id="drag-item">One</div>
<div id="drag-item">Two</div>
<div id="drag-item">Three</div>

只有第一个divwithid "drag-item"是可拖动的，但其他的不是。我希望它们都是可拖动的。我知道这可以通过为每个对象分配一个不同的来完成id，但我宁愿只声明一个id允许所有对象具有id可拖动功能的对象。我怎么能做到这一点？

score 6 · Accepted Answer

$(function(){
    $(".drag-item").draggable();
});

HTML：

<div class="drag-item">One</div>
<div class="drag-item">Two</div>
<div class="drag-item">Three</div>

使用class而不是id.

重复的 html 是无效id的。

score 5 · Accepted Answer

你不能像那样复制 ID。ID 应该是唯一的。使用类选择器

HTML：

<div class="drag-item">One</div>
<div class="drag-item">Two</div>
<div class="drag-item">Three</div>

JS：

$(function(){
    $(".drag-item").draggable(); //Edit: as MrOBrian pointed out
});

score 5 · Accepted Answer

如果您可以随意更改 HTML，则可以使用 aclass而不是id.

$(function(){
    $(".drag-item").draggable();
});

<div class="drag-item">One</div>
<div class="drag-item">Two</div>
<div class="drag-item">Three</div>

但是，如果您不能随意更改 HTML，则可以使用以下内容：

$(function(){
    $("[id=drag-item]").draggable();
});

与不同的是#drag-item，属性选择器将返回所有匹配的元素，而不仅仅是第一个。但请记住，具有多个相同元素id意味着您的HTML 无效。

3 回答 3