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下面

下面是一个基于jQuery UI Sortable的表格拖拽表头整列都会改变的完整代码: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery UI Sortable</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <style> table { border-collapse: collapse; width: 100%; } th, td { border: 1px solid #ddd; padding: 8px; text-align: left; } th { background-color: #f2f2f2; cursor: pointer; } .ui-state-highlight { height: 1.5em; line-height: 1.2em; border: 1px dashed red; } </style> </head> <body> <table id="sortable"> <thead> <tr> <th data-col="0">Name</th> <th data-col="1">Age</th> <th data-col="2">Country</th> <th data-col="3">Job</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>28</td> <td>USA</td> <td>Developer</td> </tr> <tr> <td>Jane</td> <td>32</td> <td>Canada</td> <td>Designer</td> </tr> <tr> <td>James</td> <td>25</td> <td>UK</td> <td>Manager</td> </tr> </tbody> </table> <script src="//code.jquery.com/jquery-3.6.0.min.js"></script> <script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <script> $(function() { $("#sortable thead th").click(function() { var colIndex = $(this).index(); var sortOrder = $(this).hasClass("asc") ? "desc" : "asc"; $(this).closest("table").find("tbody tr").each(function() { var $cell = $(this).find("td").eq(colIndex); var value = $cell.text(); $cell.data("value", value); }); $(this).closest("table").find("tbody tr").sort(function(a, b) { var aVal = $(a).find("td").eq(colIndex).data("value"); var bVal = $(b).find("td").eq(colIndex).data("value"); if (sortOrder === "asc") { return aVal.localeCompare(bVal); } else { return bVal.localeCompare(aVal); } }).appendTo($(this).closest("table").find("tbody")); $(this).closest("table").find("thead th").removeClass("asc desc"); $(this).addClass(sortOrder); }).disableSelection(); $("#sortable").sortable({ axis: "x", handle: "th", placeholder: "ui-state-highlight", start: function(e, ui) { ui.placeholder.width(ui.helper.outerWidth()); }, update: function(e, ui) { var $table = ui.item.closest("table"); var thIndex = ui.item.index(); $table.find("tr").each(function() { $(this).find("td, th").eq(thIndex).detach().appendTo($(this)); }); } }).disableSelection(); }); </script> </body> </html> ``` 上述代码中,我们首先创建了一个表格,其中thead中的每个th元素都有一个data-col属性,用于指示该列的索引(从0开始)。 然后,我们使用jQuery UI Sortable使表头可拖拽排序,并在update事件中实现了拖拽整列的功能。具体来说,我们使用了axis、handle、placeholder、start和update参数来实现这个功能。 最后,我们使用了click事件来实现列排序的功能。具体来说,我们为每个th元素添加了click事件,用于更新tbody中的行的顺序。我们还使用了localeCompare函数来比较字符串的值,并使用addClass和removeClass函数来切换排序方向。 需要注意的是,为了防止拖拽时选择文本,我们使用了disableSelection函数来禁用了文本选择功能。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值