允许具有相同id的对象可以使用jQuery进行拖动

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>

只有第一个div具有id "drag-item"可拖动,但有些则没有.我希望他们所有人都可以拖延.我知道这可以通过为每个人分配不同来完成id,但我宁愿宣布一个id允许所有对象具有iddraggable功能的对象.我怎么能这样做？

Answer 1

$(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.

拥有副本id的html无效.

Answer 2

你不能像那样复制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
});

Answer 3

如果您可以自由更改HTML,则可以使用a class而不是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.