jquery UI的Sortable拖动之后的存储

       这一段时间在学习用jquery UI做东西，从demo中找到了Sortable这个组件再结合jquery.layout.js做首页的布局，官网地址如下http://jqueryui.com/demos/sortable/#portlets.

      但是在项目中仅仅可拖动还是不行的，有时候用户改变了每个模块的位置还希望能保持下来。这里利用cookies存储，也可以试试用数据库存储。

Sortable组件的代码如下，为了省去再去官网看的时间，再复制粘贴一遍：

<style>
    .column
    {
        width: 170px;
        float: left;
        padding-bottom: 100px;
    }
    .portlet
    {
        margin: 0 1em 1em 0;
    }
    .portlet-header
    {
        margin: 0.3em;
        padding-bottom: 4px;
        padding-left: 0.2em;
    }
    .portlet-header .ui-icon
    {
        float: right;
    }
    .portlet-content
    {
        padding: 0    .ui-sortable-placeholder *
    {
        visibility: hidden;
    }
</style>
<script>    $(function () { $(".column").sortable({ connectWith: ".column" }); $(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all").find(".portlet-header").addClass("ui-widget-header ui-corner-all").prepend("<span class='ui-icon ui-icon-minusthick'></span>").end().find(".portlet-content"); $(".portlet-header .ui-icon").click(function () { $(this).toggleClass("ui-icon-minusthick").toggleClass("ui-icon-plusthick"); $(this).parents(".portlet:first").find(".portlet-content").toggle(); }); $(".column").disableSelection(); });</script>
<div class="demo">
    <div class="column">
        <div class="portlet">
            <div class="portlet-header">
                Feeds</div>
            <div class="portlet-content">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
        </div>
        <div class="portlet">
            <div class="portlet-header">
                News</div>
            <div class="portlet-content">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
        </div>
    </div>
    <div class="column">
        <div class="portlet">
            <div class="portlet-header">
                Shopping</div>
            <div class="portlet-content">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
        </div>
    </div>
    <div class="column">
        <div class="portlet">
            <div class="portlet-header">
                Links</div>
            <div class="portlet-content">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
        </div>
        <div class="portlet">
            <div class="portlet-header">
                Images</div>
            <div class="portlet-content">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
        </div>
    </div>
</div>
<!-- End demo -->
<div class="demo-description">
    <p>
        Enable portlets (styled divs) as sortables and use the <code>connectWith</code>option
        to allow sorting between columns.</p>
</div>
<!-- End demo-description -->
.4em;
    }
    .ui-sortable-placeholder
    {
        border: 1px dotted black;
        visibility: visible !important;
        height: 50px !important;
    }

记得要给每一个class为column或portlet的div添加一个id属性

Sortable有个method叫Sortable，可以将每一列的portlet的id按照顺序获取返回成一个数组，当然你也可以使用DOM获取。

存储位置的js方法代码如下：

portlets = {};
//存储拖动结果
function sortableItems() {

        //获得列
    var colums = $(".column");
    for (var i = 0; i < colums.length; i++) {
        var colum = colums.eq(i);
        //获得列中可拖动的成员
        var cItem = colum.sortable("toArray");
        portlets[colum.attr("id")] = {};
        for (var t = 0; t < cItem.length; t++) {

            //获得可拖动模块的id
            var portletId = cItem[t];
            //获得可拖动模块所在的列id
            var columId = $("#" + portletId).parent().attr("id");
            portlets[columId]["portlet" + t] = portletId;

        }

    }
    //将拖动结果存储在cooke里
    $.cookies.set("portlets", portlets);

初始化的时候调用代码如下：

    var portletcookie = $.cookies.get("portlets");
    if (portletcookie) {
        for (column in portletcookie) {
            var col = portletcookie[column];
            for (portlet in col) {
                var portletId = col[portlet];

                $("#" + portletId).remove().appendTo($("#" + column));

            }
        }
    }

思路总结：其实就是按照顺序获得每个column的id和它子portlet的id，存在cooke里是构造了一个json存放，格式为{"columnOne":{"portlet0":"commInfo","portlet1":"favorite","portlet2":"contacts"}然后页面初始化的时候按照json存放的数据，把每个protle移动到对应的column下面