Note that there are some explanatory texts on larger screens.

plurals
  1. POJQuery Draggable Multiple Items with the same id not working
    primarykey
    data
    text
    <p>Do you need to give each draggable element a different name? I have 3 images I want to be able to drag them around. I tried to give them all the same id but it fails. I will have a variable number of images so I need them all to have the same id. What is going wrong here?</p> <p>Here is my code:</p> <pre><code>&lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;jQuery UI Draggable - Default functionality&lt;/title&gt; &lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" /&gt; &lt;script src="http://code.jquery.com/jquery-1.8.3.js"&gt;&lt;/script&gt; &lt;script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"&gt;&lt;/script&gt; &lt;link rel="stylesheet" href="/resources/demos/style.css" /&gt; &lt;style&gt; #draggable { width: 150px; height: 150px; padding: 0.5em; border:1px solid black;} &lt;/style&gt; &lt;script&gt; $(document).ready(function(){ $("#draggable").draggable(); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;img id="draggable" src="small/Koala.jpg"/&gt; &lt;img id="draggable" src="small/Desert.jpg"/&gt; &lt;img id="draggable" src="small/Tulips.jpg"/&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Now it will not clone - I want to clone the image and drop the clone into the droppable box.</p> <pre><code>&lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;Wall Builder&lt;/title&gt; &lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" /&gt; &lt;script src="http://code.jquery.com/jquery-1.8.3.js"&gt;&lt;/script&gt; &lt;script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"&gt;&lt;/script&gt; &lt;link rel="stylesheet" href="/resources/demos/style.css" /&gt; &lt;style&gt; .draggable { width: 85px; height: 85px; padding: 0.5em; border:1px solid black;} .droppable { width: 150px; height: 150px; padding: 0.5em; border:1px solid black;} &lt;/style&gt; &lt;script&gt; $(document).ready(function() { $(".draggable").draggable({ revert: "invalid" ,helper: 'clone' }); $( ".droppable" ).droppable({ accept: "draggable" }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;img class="draggable" id="1" src="small/Koala.jpg"/&gt; &lt;img class="draggable" id="2" src="small/Desert.jpg"/&gt; &lt;img class="draggable" id="3" src="small/Tulips.jpg"/&gt; &lt;div class="droppable" id="d1"&gt;&lt;/div&gt; &lt;div class="droppable" id="d2"&gt;&lt;/div&gt; &lt;div class="droppable" id="d3"&gt;&lt;/div&gt; &lt;div class="droppable" id="d4"&gt;&lt;/div&gt; &lt;div class="droppable" id="d5"&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload