How to save position of dragged items

HI, I want to save the position of dropped items to database[aspx,javascript]. The user can drop any number of item,resize and delete[hide] and finally when they hit 'save' button ,it should be saved to database. I have code to do this in drop /stop but it will save all the dropped items i want to save only at final stage. I guess lot of developer should have already done this,so please suggest some code.

  $(function() {
      $('#frame img').live('mousemove', function(event) {
          $('#frame img').resizable().parent().draggable();
      });
  });


  $(function() {
      $('#frame img').live('dblclick', function(event) {
          // $(this).resizable("destroy")  not working
          $(this).hide();
          //$(this).unbind("resizable"); not working
          //$(this).removeclass(); not working
      });
  });

  $(document).ready(function() {
      //Counter
      counter = 0;

      //Make element draggable
      $("img").draggable({
          helper: 'clone',
          containment: '#frame',

          //When first dragged
          stop: function(ev, ui) {
              var pos = $(ui.helper).offset();
              objName = "#clonediv" + counter
              $(objName).css({ "left": pos.left, "top": pos.top });

              $(objName).removeClass("drag");
              //When an existiung object is dragged
              $(objName).draggable({
                  containment: 'parent',
                  stop: function(ev, ui) {
                      var pos = $(ui.helper).offset();
                  }
              });
          }
      });

      //Make element droppable
      $("#frame").droppable({

          drop: function(ev, ui) {

              if (ui.helper.attr('id').search(/drag[0-9]/) != -1) {
                  var pos = $(ui.helper).offset();

                  counter++;
                  var element = $(ui.helper).clone();

                  //var element = element1.resizable();
                  element.addClass("