Rearrange and save images in gallery using jQuery,php,MySQL <p>I've a dynamic gallery created with php and MySQL. Images are loaded from database tables and are shown according to auto increment id. However I need to sort the images by drag and drop system. I've implemented drag n drop with jquery. I need to rearrange them and their order should be stored in database table.</p> <p><strong>I've used the below drag and drop jquery and is working properly.</strong></p> <pre><code>&lt;script type="text/javascript"&gt; $(function() { $("#dragdiv li,#dropdiv li").draggable({ appendTo: "body", helper: "clone", cursor: "move", revert: "invalid" }); initDroppable($("#dropdiv li,#dragdiv li")); function initDroppable($elements) { $elements.droppable({ activeClass: "ui-state-default", hoverClass: "ui-drop-hover", accept: ":not(.ui-sortable-helper)", over: function(event, ui) { var $this = $(this); }, drop: function(event, ui) { var $this = $(this); var li1 = $('&lt;li&gt;' + ui.draggable.html() + '&lt;/li&gt;') var linew1 = $(this).after(li1); var li2 = $('&lt;li&gt;' + $(this).html() + '&lt;/li&gt;') var linew2 = $(ui.draggable).after(li2); $(ui.draggable).remove(); $(this).remove(); var result = {}; var items = []; $('#allItems').each(function () { var type = $(this).attr('data-type'); $(this).find('li').each(function (index, elem) { items.push(this.innerHTML); }); result[type] = items; }); // alert(items); alert($('.lb').attr('id')); initDroppable($("#dropdiv li,#dragdiv li")); $("#dragdiv li,#dropdiv li").draggable({ appendTo: "body", helper: "clone", cursor: "move", revert: "invalid" }); } }); } }); &lt;/script&gt; </code></pre> <p><strong>The php n MySQL code for display images in gallery is given below</strong></p> <pre><code>&lt;div class="box-content" id="maindiv"&gt; &lt;br&gt; &lt;div id="dragdiv"&gt; &lt;?php $sql1=mysql_query("select bnr_img_id,bnr_img_name,img_cap from xhr_bnr_images where bnr_img_par='$id' order by bnr_img_id desc "); $n1=mysql_num_rows($sql1); if($n1&gt;0) { ?&gt; &lt;ul id="allItems" runat="server" class="col-md-12" &gt; &lt;?php while($row1=mysql_fetch_array($sql1)) { ?&gt; &lt;li&gt; &lt;div class="lb" id="&lt;?php echo $row1['bnr_img_id'];?&gt;"&gt; &lt;img src="banner/&lt;?php echo $row1['bnr_img_name'];?&gt;" width="177px" height="150px"&gt; &lt;br/&gt;&lt;br/&gt; &lt;div&gt;&lt;input id="cap&lt;?php echo $row1['bnr_img_id'];?&gt;" value="&lt;?php echo $row1['img_cap'];?&gt;" onblur="update_caption('&lt;?php echo $row1['bnr_img_id'];?&gt;')" style="font-size:12px;font-weight:normal;width:180px;" type="text"&gt;&lt;/div&gt; &lt;a href="javascript:void(0);" onclick="del_this('&lt;?php echo $row1['bnr_img_id'];?&gt;','&lt;?php echo $row1['bnr_img_name'];?&gt;')"&gt;delete&lt;/a&gt; &lt;/div&gt; &lt;/li&gt; &lt;?php } ?&gt; &lt;/ul&gt; &lt;?php } ?&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p><strong>I need to get the replaced image id and their values should be shuffled when dragged</strong>.</p> <p>Captions of the images updated by <strong>onblur</strong> function and its <strong>id</strong> will be send to another php file via <strong>ajax</strong></p>