Question

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

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

示例：如果我抓住一个元素的左侧位置，我的窗口调整为其原始大小的50％（小于），我的左侧位置将与100％大小不同。

因此，如果用户使用窗口调整元素减少50％并在同一用户返回时保存它，则元素将变得混乱（如果窗口调整大小不同）。

如果你去你的控制台，你会看到（值）：

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。

基本上，如果我将浮动：左边的元素类更改为无或更改ID模板来自＆＃34;％＆＃34;到＆＃34; px＆＃34;如下所示我可以解决这个问题，但在MAC上它会保持错误的行为。

.element { 
float: none; 
}

#template {
width: 1000px; 
}

有什么想法吗？

Answer 1

嗯，实际上我是想以最坏的方式做。

我的布局很流畅所以一切都用＆＃34;％＆＃34;来定义。当我试图重新定位元素时，我需要减去为＆＃34;宽度＆＃34;保存的左侧位置。布局元素位于元素之前，但问题是这些布局元素可以改变其宽度＆＃34;因此，根据窗口的调整，分辨率也会受到影响。

我应该重新定位的元素位于用＆＃34; px＆＃34;定义的DIV元素内。所以，这种方式更容易。我刚拿出了＆＃34; float：left＆＃34;从中获得了像 $。css（＆＃39; left＆＃39;）这样的位置。

问题在于我的方法。现在我基本上得到并重新定位：

获取

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

重新定位

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

如何捕捉div位置并在以后重新定位（在MAC上）

1 个答案: