允許用相同的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，它允許具有該可拖動功能的所有對象都具有該id。我將如何能夠做到這一點？

Answer 1

你不能重複這樣的ID。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 2

$(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的。

Answer 3

如果隨意更改HTML，您可以使用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，您可以使用以下命令：

​​

不像#drag-item，則attribute selector將返回所有匹配的元素，而不是隻是第一個。但請記住，具有相同的多個元素id意味着您有invalid HTML。