Make all elements draggable if they have the same ID

jquery

Solution

ID's in a HTML page should be unique..

If you give duplicate Id's and use that as a selector, it will always select the first element that it encounters.. `So it will never work.`

Try using a class instead.

You can give the class called `draggable` to all the element you want to drag.

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

Check Fiddle

Problem

Using JQuery, I'm trying to make multiple elements draggable when the elements all have the same ID. Is is possible to do this using JQuery? (Here, there are two divs with the id "draggable", and I'd like to make both of them draggable.) The relevant code is here: http://jsfiddle.net/zcJwu/ ``` <!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>​ ```

Original source