jquery在重新加载站点后恢复可拖动位置答案

【问题标题】：jquery restore draggables position after reloading sitejquery在重新加载站点后恢复可拖动位置
【发布时间】：2023-03-31 14:08:01
【问题描述】：

我正在尝试将一个 div 从一个容器拖到另一个容器并将它们放在那里。这样可行。问题是当我尝试保存并重新加载位置时。 Draggable & droppable div应该从#dragdelete div拖到#tagDropPoint div

$('.resizeDiv')
    .draggable({ revert: "invalid", snap: "#dragDelete", snapMode: "inner", containment: "#draggableArea" });

$('#tagDropPoint').droppable({accept: '.resizeDiv',
    drop: function(event, ui) {
        setActive(lastXmlTag);
        ui.draggable.resizable();
        }
 });

这就是我获得职位的方式

$('.resizeDiv').mouseup(
    function(){
        var position = $(this).position();
        var dropAreaPos = $('#tagDropPoint').position();

        var xpos = position.left - dropAreaPos.left;
        var ypos = position.top - dropAreaPos.top;

        var width = $(this).width();
        var height = $(this).height();

        var thisId = $(this).attr("id");
        lastXmlTag = thisId;
        updateDDXMLAttr(xpos, ypos, width, height, thisId);

    }
);

用于拖动的 HTML：将标签拖到此处。

        <div class="ddSpacer">&nbsp;</div>

        <div id="dragDelete" class="dragDelete" style="height: {$this->heightListBox}px;">
            <p class="dynConTagHeading">XML-Tags</p>
            <div id="dynConTagsContainer">

            </div>
        </div>
            <p style="clear: both">&nbsp;</div>
        </div>

位置和大小值存储在隐藏字段中，并在刷新站点后重新加载。 draggableArea div 显示在 jquery 对话框中。但是重新加载时位置不一样。怎么解决。

【问题讨论】：

请创建一个 JSFIDDLE : jsfiddle.net 。
现在我创建了一个 jsfiddle link 但没有重新加载。我希望我可以在 jsfiddle 中没有完整功能的情况下解释这个问题。如您所见，有一个可拖动的 div，您可以将其拖动到灰色区域。在重新加载页面上，我得到值 xpos = position.left - dropAreaPos.left;ypos = position.top - dropAreaPos.top;从 POST（在 jsf 中现在没有我使用的隐藏字段）我的问题是：当我通过 $('.resizeDiv').css() 将 x pos 和 ypos 放回 div 时，位置不一样和以前一样
我正在检查你的代码。

标签： jquery css html position draggable

【解决方案1】：

使用 cookie 来存储位置，或使用服务器端页面渲染技术（如 php 或 ASP.NET）来交付页面，其中 Div 位于正确的位置。

页面 div 位于原始位置是正确的 HTML 行为，没有什么可以“修复”这种行为，这就是它的工作方式。如果您希望它表现不同，请使用 cookie 或以不同方式呈现页面。

【讨论】：

存储位置不是问题。获得这些值也没有问题。我唯一的问题是我从 $('#tagDropPoint').position() 获得的位置在通过css“重置”div时不一样。
@Livingstone 可能有很多原因，如填充、边距、绝对位置，可能会导致您变得不正确。
哦，好的，我使用绝对位置作为周围 div 和相对位置作为可拖动 div。我会检查的

【解决方案2】：

位置可能由于填充、边距、绝对位置而移动，也可能是由于某些编码错误。

如果您可以为此创建一个JSFiddle，那么调试和帮助您会更容易。

【讨论】：

【解决方案3】：

Javascript（包括 Jquery）只是浏览器操作。要保存，您需要将设置保存到数据库或文件。

【讨论】：

也许我没有准确解释我遇到的问题。我从 POST 获取值（xpos，ypos ...）。并将这些值加载到每个 div css 也可以。我的问题是位置不完全相同。他们轻轻地移动
div 的位置与重新加载前的位置不同。