保存可拖动Div位置

Save Draggable Div Position

本文关键字：位置 Div 拖动 保存      更新时间：2023-09-26

我已经为我的网站添加了拖拽和移动div，我使用每个页面的通用页眉。

我拖动和移动div代码如下:

脚本: 

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

Div: 

<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页。

任何想法。

谢谢…

看一下下面的代码:

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

当用户返回时重新定位元素:

$("#draggable").css( { "left" : $.cookie("elementIDCookie").left, "top" : $.cookie("elementIDCookie").top });
相关文章：