Draggable divs in jquery must be selected in order for positon to be stored to database
<p>I am trying to create a page where I can position divs using my mouse and then store the positon data in a database using php. I want to be able to move multiple divs at once and store their position. </p>

<p>My problem is with jquery. The code only allows me to select, move and store information of multiple divs when I select them in the order they appear in the code below. Moving them one and one works fine.</p>

<p>The jquery code:</p>

<pre><code>&lt;script type="text/javascript"&gt;
$(function() {

    $("#1").multidraggable();
                               $("#1").mousedown(function(){
                               pos1 = '1';
                               });

    $("#2").multidraggable();
                               $("#2").mousedown(function(){
                               pos2 = '2';
                               });

    $("#3").multidraggable();
                               $("#3").mousedown(function(){
                               pos3 = '3';
                               });

    $("#4").multidraggable();
                               $("#4").mousedown(function(){
                               pos4 = '4';
                               });

    $("#5").multidraggable();
                               $("#5").mousedown(function(){
                               pos5 = '5';
                               });

    $("#6").multidraggable();
                               $("#6").mousedown(function(){
                               pos6 = '6';
                               });

            $(".element").mouseup(function(){
                   var coord1 = $('#1').position();
                   var url1 = "updatecoords.php?x=" + coord1.left + "&amp;y=" + coord1.top + "&amp;id=" + pos1 + "";
                   $('#result1').load(url1, function() {
                   });
                   var coord2 = $('#2').position();
                   var url2 = "updatecoords.php?x=" + coord2.left + "&amp;y=" + coord2.top + "&amp;id=" + pos2 + "";
                   $('#result2').load(url2, function() {
                   });
                   var coord3 = $('#3').position();
                   var url3 = "updatecoords.php?x=" + coord3.left + "&amp;y=" + coord3.top + "&amp;id=" + pos3 + "";
                   $('#result3').load(url3, function() {
                   });
                   var coord4 = $('#4').position();
                   var url4 = "updatecoords.php?x=" + coord4.left + "&amp;y=" + coord4.top + "&amp;id=" + pos4 + "";
                   $('#result4').load(url4, function() {
                   });
                   var coord5 = $('#5').position();
                   var url5 = "updatecoords.php?x=" + coord5.left + "&amp;y=" + coord5.top + "&amp;id=" + pos5 + "";
                   $('#result5').load(url5, function() {
                   });
                   var coord6 = $('#6').position();
                   var url6 = "updatecoords.php?x=" + coord6.left + "&amp;y=" + coord6.top + "&amp;id=" + pos6 + "";
                   $('#result6').load(url6, function() {
                   });
    });

});
&lt;/script&gt;
</code></pre>

<p>I use the jquery library multidraggable which works great. I understand my problem is with how I've organized the code but I cannot figure out how I should do it.</p>

<p>Thank you in advance!
Emil</p>
