保存可拖动的 div 位置

Posted 2023-05-08

【中文标题】保存可拖动的 div 位置

【英文标题】：Save Draggable Div Position

【发布时间】：2013-05-14 00:22:39

【问题描述】：

我在我的网站上添加了一个拖动和移动 div，我为每个页面使用了通用标题。

我的拖拽div代码如下：

脚本：

<script type="text/javascript">
    $(function() 
        $( "#draggable" ).draggable();
    );
</script>

分区：

<div class="student_avatar_header" id="draggable" title="Drag and Move...">
    Some texts...
</div>

CSS：

.student_avatar_header 
    width: 100px;
    height: 100px;
    position: absolute;
    left: 10px;
    top: 20px;
    border-radius: 250px;
    z-index: 9998;
    box-shadow: 2px 2px 12px #008abc;
    cursor: move;

这个拖动和移动功能工作正常，我的问题是我已将这个 可拖动 Div 添加到我的标题中，因此它甚至会出现在访问我网站的任何页面，我只想设置一个 cookie 功能或者有什么可能记住它拖动的最后位置。例如，现在我在这里home 页面，我只是将我的 div 拖到页面底部，但是当我转到about 页面时，这个 div 出现不是以前的位置，它出现的默认位置。即使我访问我网站的任何页面，我也需要它显示以前的位置，

注意： 我的网站有超过 35 个页面。

有什么想法吗？

谢谢...

【问题讨论】：

看这里***.com/questions/12336048/…！

任何人都可以请为上述脚本写一个答案..???感谢您的每一个帮助

【参考方案1】：

看看下面的代码：

$("#draggable").draggable(
    stop: function(event, ui) 
        $.cookie("elementIDCookie", ui.position);
    
);

在用户返回时重新定位元素：

$("#draggable").css(  "left" : $.cookie("elementIDCookie").left, "top" : $.cookie("elementIDCookie").top );