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>
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
draggableto all the element you want to drag.Check Fiddle