JQuery Sortable Preview <p>I need help with Sortable JQuery UI. My requirement is whenever I move the 1st div (portlet 1) with 5th div (portlet 5) 5th and 1st should get swapped and before releasing the mouse the preview should be the same (portlet 5 should be in the first place). Please help me. Please find the fiddle: <a href="http://jsfiddle.net/R_S/3TqTU/2/" rel="nofollow">http://jsfiddle.net/R_S/3TqTU/2/</a></p> <pre><code>&lt;div class="dropme"&gt; &lt;div class="rpt 1 row1"&gt;&lt;span class="heading"&gt;Portlet 1&lt;/span&gt;&lt;/div&gt; &lt;div class="rpt 2 row1"&gt;&lt;span class="heading"&gt;Portlet 2&lt;/span&gt;&lt;/div&gt; &lt;div class="rpt 3 row1"&gt;&lt;span class="heading"&gt;Portlet 3&lt;/span&gt;&lt;/div&gt; &lt;div class="rpt 4 row2"&gt;&lt;span class="heading"&gt;Portlet 4&lt;/span&gt;&lt;/div&gt; &lt;div class="rpt 5 row2"&gt;&lt;span class="heading"&gt;Portlet 5&lt;/span&gt;&lt;/div&gt; &lt;div class="rpt 6 row2"&gt;&lt;span class="heading"&gt;Portlet 6&lt;/span&gt;&lt;/div&gt; &lt;div class="rpt 7 row3"&gt;&lt;span class="heading"&gt;Portlet 7&lt;/span&gt;&lt;/div&gt; &lt;div class="rpt 8 row3"&gt;&lt;span class="heading"&gt;Portlet 8&lt;/span&gt;&lt;/div&gt; &lt;div class="rpt 9 row3"&gt;&lt;span class="heading"&gt;Portlet 9&lt;/span&gt;&lt;/div&gt; &lt;/div&gt; $('.rpt').draggable({ cursor: 'pointer', connectWith: '.rpt', connectToSortable:'.dropme' helper: 'clone' }); $('.dropme').sortable({ connectWith: '.dropme', cursor: 'pointer' }); </code></pre>