c# – 如何保存拖动项目的位置

HI,
我想把删除的项目的位置保存到数据库[aspx,javascript].用户可以删除任意数量的项目,调整大小并删除[隐藏],最后当他们点击“保存”按钮时,应将其保存到数据库.我有代码在drop / stop中执行此操作,但它会保存所有丢弃的项目,我只想在最后阶段保存.
我想很多开发人员应该已经做到了,所以请建议一些代码.

$(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("tempclass");
                  $(this).append(element);
                  $(".tempclass").attr("id","clonediv" + counter);
                  //$(".tempclass").attr("onclick",function(){ $(this).remove(););
                  $("#clonediv" + counter).removeClass("tempclass");
                  //Get the dynamically item id
                  draggednumber = ui.helper.attr('id').search(/drag([0-9])/)
                  itemDragged = "dragged" + RegExp.$1
                  //console.log(itemDragged)
                  //alert('left' + pos.left + ',top' + pos.top + 'of item' + itemDragged);
                  $("#clonediv" + counter).addClass(itemDragged);
              }
          }
      });
      //Make the element resizable


  });

请纠正我,如果有什么问题.
提前致谢

解决方法

假设您的元素是列表项下的列表项,其ID为项.

jQuery的

var locations = [];

$('#items li').each(function(i) {

    locations[i] = {
        x: $(this).offset().left,y: $(this).offset().top
    };

});

然后将其发布到您的服务器端.不知道更多的细节,我不能100％肯定这是否是必需的.

在页面加载时,只需循环遍历位置并向您添加一个属性,如(假设为PHP)

HTML / PHP

<ul id="items">
<?PHP foreach($items as $item): ?>
<li style="left: <?PHP echo $item['x']; ?>px; top: <?PHP echo $item['x']; ?>px">item</li>
<?PHP endforeach; ?>
</ul>

当然你也可能需要做

CSS

#items {
    position: relative;
}

#items li {
    position: absolute;
}