附加 table 与位置不完全显示它在哪里

Question

我正在开发一个带有 Jquery-ui 可拖拽的网站。在父 div 块“容器”中，有许多子可拖动对象允许用户在 div 块周围自由移动。

    <div class="container">
      <div class="draggable ui-widget-content" id="1">Table 1</div>
      <div class="draggable ui-widget-content" id="1">Table 2</div>
      ...
    </div>

我实现了一个保存功能，将每个 div 块的位置保存为 json 字符串。它存储可拖动对象的位置及其 ID。所以它可以加载到它们上次所在的位置。

[{"id":"1","left":"256","top":"226"},{"id":"2","left":"256","top":"632"},{"id":"3","left":"1330","top":"226"},{"id":"4","left":"1330","top":"632"},{"id":"5","left":"818","top":"417"}]

这是问题所在：

我从 json 加载了数据。原来所有位置都错了

我使用 JSFiddle 重新创建了这个问题：https://jsfiddle.net/braveminds1823/wcmxL2bj/3/

保存前

保存后，从json加载位置

编辑：我知道将位置设置为绝对有效，但因为我的网站是响应式的。 draggables 会脱离容器并覆盖网页内容

Answer 1

从您在问题中提供的内容（不仅仅是 fiddle）可以看出您存储的值不正确。

只看“table” - 当你加载时，它是 20x20，但是当你进一步向左和向上移动它时，它现在是 256x226 - 显然没有正确保存。

您的问题与您对 position

的使用有关

来自 MDN position:

relative

The element is positioned according to the normal flow of the document,
and then offset relative to itself

所以里面的方块不需要position:relative，他们想要position:absolute

absolute

The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor

所以在css中做了两个小改动：

.draggable {
   position:absolute;
}
#containment-wrapper {
   position:relative;
}

这样可拖动项相对于父包装器绝对定位。

否则，您的代码可以正常工作。

已更新 fiddle：https://jsfiddle.net/hrfx9sky/1/

附加 table 与位置不完全显示它在哪里

Append table with position is not exactly showing where it was

html

javascript

jquery

layout