Jquery UI可排序、存储位置和大小？

我是Jquery新手，正在尝试将使用jQueryUI插件排序的元素的位置和大小存储在页面上。我希望用户“保存”当前布局，并使用php/mysql将数据存储在数据库中，这样当他们再次访问元素时，元素的大小和位置将相同

 <script type="text/javascript">
    $(function() 
    {
        $("#sortable").sortable({
            revert: true,
            axis: 'y',
            opacity: 0.9,
            tolerance: 'pointer',

        });

        $("#draggable").draggable({
            connectToSortable: '#sortable',
            helper: 'clone',
            revert: 'invalid'           
        })  
        $("#sortable").resizable({})        
    });

    </script>

$（函数（）
{
$（“#可排序”）。可排序({
回复：对，
轴：‘y’，
不透明度：0.9，
公差：“指针”，
});
$（“#可拖动”）。可拖动({
connectToSortable:“#可排序”，
助手：“克隆”，
回复：“无效”
})  
$（“#可排序”）。可调整大小（{}）
});

上面是我脚本的一部分，它基本上允许使用列表对框进行排序和拖动

非常感谢

编辑：

第1项
第2项
第3项

我正在尝试单独使用div标记，而不必将它们也包含在列表中？不必将div包含在列表中

再次感谢。

在可拖动回调函数中创建一个

这是因为通过回调，您可以获得当前坐标，并且可以将它们保存到数据库中

---

下面是一个例子：

 $("#draggable").draggable({
                connectToSortable: '#sortable',
                helper: 'clone',
                revert: 'invalid',
                stop : function (event, ui) {
                    //callback function
                    $.post("savepos.php", 
                        { 
                            //parameters to send to your ajax page
                            top: ui.position.top, 
                            left : ui.position.left 
                        }  
                    );
                }
            });

---

sortable

为这种场景提供了方便的方法，称为

serialize

（请参阅）<代码>序列化生成可在AJAX请求中使用的查询字符串；您可以这样使用它：

$('#sortable').sortable(
{
    stop: function(event, ui)
    {
        $.post('save.php', $('#sortable').serialize());
    }
});

然后就是实现

save.php

来支持这个过程的问题。文档中给出的示例查询字符串（

foo[]=1&foo[]=5&foo[]=2

）将生成一个

$\u POST

数组，其中包含：

array(1) {
  ["foo"]=>
  array(3) {
    [0]=>
    string(1) "1"
    [1]=>
    string(1) "5"
    [2]=>
    string(1) "2"
  }
}

---

你能发布一个html的例子吗？编辑：了解了如何单独使用divs。这里有一篇文章讨论了如何将php和ajax结合起来：嗨，谢谢，从php脚本中我将“获取”什么，我将使用GET函数吗？e、 g.获取['top']等，它们是这样发送的吗？感谢php，使用如下变量：$\u POST['top']

array(1) {
  ["foo"]=>
  array(3) {
    [0]=>
    string(1) "1"
    [1]=>
    string(1) "5"
    [2]=>
    string(1) "2"
  }
}