Question

I have created the following jQuery code to allow for an object to be draggable:

JavaScript:

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

HTML:

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

Only the first div with id "drag-item" is draggable, but the others are not. I want all of them to be draggable. I understand that this can be done by assigning each one a different id, but I would rather just declare one id that allows all object with that id the functionality of draggable. How would I be able to do this?

Answer 1

You cannot duplicate ID’s like that.. ID’s should be unique. Use a class selector

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
});