1

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

4

3 回答 3

2

使用 cookie 来存储位置，或者使用服务器端页面渲染技术（如 php 或 ASP.NET）来传递带有正确位置的 Div 的页面。

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

于 2012-12-15T10:06:50.283 回答
0

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

于 2012-12-15T10:07:02.280 回答
0

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

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

于 2012-12-15T10:20:30.120 回答