如何保存可拖动元素的位置？

Question

您好，我正在django中创建一个Web应用程序，它允许您执行的操作是在页面上拖动元素，我想要做的就是保存这些元素的位置，以便在重新加载页面时将这些元素保留在他们离开的位置相同，有什么办法保存位置？

这是我的JavaScript来拖动元素。

<script src="http://threedubmedia.com/inc/js/jquery-1.7.2.js"></script>
<script src="http://threedubmedia.com/inc/js/jquery.event.drag-2.2.js"></script>
<script type="text/javascript">
    jQuery(function ($) {
        $('.drag')
            .click(function () {
                $(this).toggleClass("selected");
            })
            .drag("init", function () {
                if ($(this).is('.selected'))
                    return $('.selected');
            })
            .drag(function (ev, dd) {
                $(this).css({
                    top: dd.offsetY,
                    left: dd.offsetX
                });
            });
    });

这是一个或多个被拖动的元素，元素的数量是可变的，因为它是由数据库决定的。

<div class="drag">
                    <span class="dot" title="{{ device.device_name }}" style="background-color: #197f32"><br/><b><p
                            style="color: #ce3830;"> {{ device.device_name }}</p></b></span>
                </div>