Question

这是我的jfiddle：http://jsfiddle.net/3HauW/78/

正如你所看到的，我有两个盒子，它们是可拖动的（使用jsPlumb）。当我点击“保存”按钮时，我希望能够保存他们所处的位置。我想要保存X和Y坐标，我该怎么做或接近这个？

我想存储它们，然后以XML格式发布到数据库（即x = 10，y = 10）：

     <topY>10</topY>
     <leftX>10</leftX>

编辑：遏制遏制

Answer 1

要存储元素的所有css属性，请使用以下代码（迭代所有元素的代码并将它们存储在一个数组中，该数组可以转换为JSON并发送到服务器进行保存）：

var str=$('#elem').attr("id") +","+ $('#elem').css("top") +","+ $('#elem').css("left") +","+ $('#elem').css("height") +","+ $('#elem').css("width");

现在，属性存储在由“，”分隔的单个字符串中。在重新使用分割字符串时使用：

var inf=str.split(",");

其中inf [0] = id_value，inf [1] = top_value，....，inf [4] = width_value。

Answer 2

你需要什么似乎是jquery的.offset()功能。它为您提供元素相对于文档的位置。

Answer 3

这是我在拖动时获取鼠标位置所做的。你可能需要做一点改动。

var top , left;
component.draggable({
  cursor: 'move',
  stop: function (event, ui) {
        top = ui.position.top;
        left =  ui.position.left;
  }
});

从此处您将获得一个对象的位置，以便您可以存储该对象以防止保存操作。希望这对你有用。

使用javascript保存框的坐标

3 个答案: