Question

我正在尝试将div从一个容器拖到另一个容器中并将它们放在那里。这样可行。问题是当我尝试保存并重新加载位置时。可拖动的＆amp; 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对话框中。但重新加载时的位置并不相同。如何修复。

Answer 1

使用cookie来存储位置或者像php或ASP.NET这样的服务器化的页面渲染技术，以便将Div与Div放在正确的位置。

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

Answer 2

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

Answer 3

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

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

jquery在重新加载站点后恢复draggables位置

3 个答案: