如何保存拖动项目的位置

Question

嗨， 我想将删除项目的位置保存到数据库 [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


  });

如有不妥，请指正。 提前致谢

Answer 1

假设您的元素是列表下的列表项，其 id 为 items。

jQuery

​​>

var locations = [];

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

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

});

然后将其发布到您的服务器端。在不了解更多细节的情况下，我无法 100% 确定这是否是全部要求。

在页面加载时，只需遍历位置并向您的li 添加一个属性，例如（假设是 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;
}

Answer 2

一种方法可能是在拖动停止时将坐标放置到一个隐藏字段中，然后您可以在后面的代码中读取该字段并将其存储在数据库中。

当您重新渲染页面时，您还需要填写该字段并使用 javascript 将对象放回原处。

此外，提及您使用的语言背后的代码可能会很方便。 C#、PHP、Java、什么？

Answer 3

根据您对上述问题的回答：

"我要将div2中的图片保存到数据库中，请看上面的代码"

看来你需要做的就是停止，获取div2的子元素。

jQuery 将是...

var x = "";
$("#div2").children("img").each(function(){
  x = x + "; " + $(this).attr("src");
});

这将返回 div2 中所有 img src 的分号分隔字符串。

Answer 4

尝试使用鼠标位置

http://docs.jquery.com/Tutorials:Mouse_Position

Answer 5

我曾经为我的一个课堂项目做过这个。由于我只有一周的时间来实施，所以这并不是一个很好的实施。我所做的方式是每当用户拖放时，我都会从 javascript 中获取最终的 x.location 和 y.location 并调用 asmx Web 服务，我将在其中发送 (x,y)。在 asmx 文件中，我编写了代码以将其保存在数据库中。

Answer 6

所以你不想把它们保存到最后？

您正在将克隆添加到#frame on drop，此时给它一个类来指示它是一个丢弃的项目。我会在“ref”属性中引用初始对象，而不是作为一个类。

可丢弃

$("#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();

            $(this).append(element);
            element.attr("id", "clonediv" + counter);

            // Get the dynamic item id
            draggedNumber = ui.helper.attr('id').search(/drag([0-9])/)
            itemDragged = "dragged" + RegExp.$1

            element.attr('ref', itemDragged);
        }
    }
});

点击方法应该类似于（假设单个帖子保存所有被丢弃的项目（x,y,width,height,original object id））：

点击

$("#saveDrops").click(function () {
    var dObjects = [];
    $.each('#frame .droppedClass', function(i) {
        dObjects[i] = {
            x: $(this).offset().left,
            y: $(this).offset().top,
            height: $(this).width(),
            width: $(this).height(),
            identifier: $(this).attr('ref');
        }
    });

    $.post('savemystuff.aspx', dObjects, function(data){
        // Do something with the results
    });
});