javascript - 如何捕捉 div 位置并稍后重新定位(在 MAC 上)

Question

我正在创建一个应用程序，其中包含可供用户使用的可拖动元素。我想保存元素的位置以便稍后在同一个地方重新定位。我在 stackoverflow 上发现了一些类似的问题，但看起来任何人都因为我遇到的同样问题而通过了。所以，我想知道我是否没有正确理解。

基本上我的问题是:根据窗口的调整，元素位置的值可能会有所不同。

示例:如果我在将窗口调整为原始大小的 50%(更少)的情况下捕获元素的左侧位置，我的左侧位置将不同于 100% 大小。

因此，如果用户将窗口中的元素减少 50% 并在同一用户返回时保存它，则元素将变得一团糟(如果窗口的大小调整不同)。

我有这个例子http://jsfiddle.net/EV5JZ/1/

如果您转到您的控制台，您将看到(值):

console.log($('#section > li:eq(0)').find('.element:last()').position().left);

如果您调整窗口大小，您将获得不同的值。

那么，我遗漏了什么或者我应该使用特定的方法吗？

CSS:

 <style>
    body, html {
      height: 100%;
      overflow: hidden;
    }

    #section { 
        list-style-type: none; 
        padding: 0px; 
        margin: 0px;
    }
    #section li { 
        margin: 0px 0px 1px 0px; 
        width: 99.9%; 
        background-color:#ccc; 
        border: 0px solid red; 
        min-height: 100px; 
        float: left;
    }
    </style>

HTML:

<div id="central-panel">

  <div id="template">
      <ul id="section">
        <li>

          <div class="element">1</div>
          <div class="element">2</div>
          <div class="element">3</div>
          <div class="element">4</div>

        </li>
        <li><span>::</span>Item 2</li>
        <li><span>::</span>Item 3</li>
        <li><span>::</span>Item 4</li>
      </ul>
  </div>

</div>

更新:

好吧，我找到了如何在 Windows 上修复它，但我意识到最大的问题是在 MAC 上。

基本上，如果我将元素类上的 float:left 更改为无或将 id 模板从“%”更改为“px”，如下所示，我可以解决该问题，但在 MAC 上它会保持错误的行为。

.element { 
float: none; 
}

#template {
width: 1000px; 
}

有什么想法吗？

Answer 1

好吧，实际上我正试图以最糟糕的方式去做。

我的布局是流动的，所以一切都用“%”定义。当我尝试重新定位元素时，我需要减去为位于元素之前的布局元素的“宽度”保存的左侧位置，但问题是这些布局元素可以根据因此，分辨率也会产生影响。

我应该重新定位的元素位于用“px”定义的 DIV 元素内。所以，这种方式要容易得多。我只是从中取出“float:left”，得到了像 $.css('left') 这样的位置。

问题是我的方法。现在基本上我是这样得到和重新定位的:

获取

$('#section > li:first()').find('.element:last()').css('left')

重新定位

$('#section > li:first()').find('.element:last()').css('left', '536px');