Draggable has been droppped and cloned, but the clone isn't draggable <p>Bit of a cryptic title there, hopefully you can help :)</p> <p>When I drag one of the Draggables, it clones itself but doesn't drop on the droppables :(</p> <p>any ideas?</p> <p>My code:</p> <pre><code>&lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;jQi&lt;/title&gt; &lt;script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" language="javascript" src="jquery-ui-1.8.4.custom.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(document).ready(function() { var i = 0; var a = 250; var b = 19; //append board $('body').append('&lt;ul id="jQiBoard"&gt;&lt;/ul&gt;'); while (i &lt; b*b) { $('ul#jQiBoard').append('&lt;li class="jQiNode"&gt;&lt;/li&gt;'); i++; } //init mouseover $('li.jQiNode').stop().mouseover(function() { $(this).animate({ opacity: 0.65 }, a); }); $('li.jQiNode').stop().mouseout(function() { $(this).animate({ opacity: 1.00 }, a); }); //append stones $('body').append('&lt;ul id="jQiStones"&gt;&lt;/ul&gt;'); $('ul#jQiStones').append('&lt;li class="jQiWhite"&gt;&lt;/li&gt;'); $('ul#jQiStones').append('&lt;li class="jQiBlack"&gt;&lt;/li&gt;'); $('li.jQiWhite').draggable({ snap: 'li.jQiNode', helper: 'clone', zIndex: 100, stop: function(event, ui) { } }); $('li.jQiBlack').draggable({ snap: 'li.jQiNode', helper: 'clone', zIndex: 100, stop: function(event, ui) { alert(ui.draggable); } }); $('li.jQiNode').droppable({ accept: 'li.jQiNode' }); }); &lt;/script&gt; &lt;style type="text/css"&gt; ul#jQiBoard { width: 570px; height: 570px; float: left; margin: 0; padding: 0; border: 2px solid black; } li.jQiNode { display: block; width: 30px; height: 30px; float: left; list-style-type: none; border: 0px solid silver; background-color: #ae996f; background-image: url(jQiNode.gif); } ul#jQiStones { padding: 10px; border: 1px solid silver; float: left; margin: 0; padding: 0; } li.jQiWhite { width: 30px; height: 30px; background-color: transparent; list-style-type: none; background-image: url(jQiWhite.gif); } li.jQiBlack { width: 30px; height: 30px; background-color: transparent; list-style-type: none; background-image: url(jQiBlack.gif); } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>