sortable Div拖动自动排版,保存位置

最新推荐文章于 2020-09-15 11:21:31 发布
最新推荐文章于 2020-09-15 11:21:31 发布
阅读量154 收藏
点赞数
文章标签： javascript xhtml ViewUI
原文链接：http://www.cnblogs.com/syyblog/archive/2012/04/19/2456562.html
版权

 

记得很久没有写blog了，可能是因为人累了，心也累了，哎。。。 这是最近一个项目中用到的一个主界面，贴上来希望可以帮到一些朋友。

效果图：

 

这是可以直接运行看实例的，注释不多，有例子，有代码，应该差不多了，另外还有三个jquery包，可以到网上下载。

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        html, body
        {
            height: 100%;
            margin: 0px;
            padding: 0px;
            font-size: 12px;
        }
       
        #dvAll
        {
            width: 100%;
        }
        #dvAll div
        {
        }
        .dvallChild
        {
            margin-top: 5px;
            float: left;
            margin-left: 5px;
            height:100%;
        }
        .dvallChild div
        {
        }
       
        .dvcontent
        {
            cursor: move;
            width: 100%;
            height: 27px;
            line-height: 27px;
            vertical-align: middle;
            margin-top: 0px;
            border: solic 1px green;
            background-color: Blue;
            background-image: url('bg.gif');
        }
        .hovercls:
        {
            border: 1px dashed red;
            background: red;
            height: 200px;
            line-height: 20px;
        }
        .placeholder
        {
            border-bottom: gray 2px dashed;
            border-left: gray 2px dashed;
            min-height: 100px;
            margin-bottom: 20px;
            border-top: gray 2px dashed;
            border-right: gray 2px dashed;
        }
       
        .cursorAt
        {
        }
        .noremove
        {
            margin-top: 5px;
            line-height: 20px;
        }
       
        .dvChild
        {
            border: 1px solid #D2D2D2;
            margin-top: 5px;
        }
        .dvtitlecls
        {
            font-weight: bolder;
            float: left;
            width: 90%;
            text-indent: 5px;
        }
        .dvdocls
        {
            float: left;
            width: 10%;
            font-weight: bolder;
            cursor: pointer;
            text-align:right;
           
        }
        .dvFont
        {
            margin-left: 5px;
            margin-right: 5px;
        }
    </style>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui.min.js"></script>
    <script type="text/javascript" src="js/jquery.cookie.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            $(".dvallChild").sortable({
                connectWith: '.dvallChild',    //指定拖动区域
                //         items: ':not(.noremove)',
                opacity: 0.5,                       //透明度
                //    helper: 'original',
                placeholder: "placeholder",     //拖动虚线框
                revert: true,                           //是否有动画
                dropOnEmpty: true, 
                distance: 10,
                appendTo: 'body',
                cancel: '.noremove'             //不参加拖动
                //       zIndex: 10
            });
            //从本地cookie获取布局
            ReadLayoutPosition();
        });

        //布局 1:3     1:2:1          3:1             1:1:1
        function ControlLayout(t) {
            if (t == 1) {
                $("#dvleft").css("width", "24%");
                $("#dvcenter").css("width", "73%");
                $("#dvright").css("width", "0");

                var dvobjleft = $("#dvleft").children("div");
                var dvobjcenter = $("#dvcenter").children("div");
                var dvobjright = $("#dvright").children("div");
                //  1:3
                if (dvobjleft.length >= 1 && dvobjcenter.length >= 1 && dvobjright.length == 0) {

                }
                else if (dvobjcenter.length >= 1 && dvobjright.length == 0 && dvobjleft.length == 0) {
                    //1:1:1
                    $("#dvleft").append(dvobjcenter[0]);
                }
                else if (dvobjright.length >= 1 && dvobjleft.length == 0 && dvobjcenter.length >= 1) {
                    // 3:1

 

                    var obj2 = $("#dvright");
                    $("#dvleft").append(obj2[0].innerHTML);
                    obj2[0].innerHTML = "";
                }
                else if (dvobjright.length >= 1 && dvobjleft.length >= 1 && dvobjcenter.length >= 1) {
                    // 1:2:1
                    var obj2 = $("#dvright");
                    $("#dvleft").append(obj2[0].innerHTML);
                    obj2[0].innerHTML = "";
                }
            }
            else if (t == 2) {
                $("#dvleft").css("width", "24%");
                $("#dvcenter").css("width", "49%");
                $("#dvright").css("width", "24%");
                var dvItem = null;

                var dvobjleft = $("#dvleft").children("div");
                var dvobjcenter = $("#dvcenter").children("div");
                var dvobjright = $("#dvright").children("div");
                //  1:3
                if (dvobjleft.length >= 1 && dvobjcenter.length >= 1 && dvobjright.length == 0) {

                    var obj2 = $("#dvleft");
                    $("#dvright").append(obj2[0].innerHTML);
                    obj2[0].innerHTML = "";

                }
                else if (dvobjcenter.length > 2 && dvobjright.length == 0 && dvobjleft.length == 0) {
                    //1:1:1
                    $("#dvleft").append(dvobjcenter[0]);
                    $("#dvright").append(dvobjcenter[1]);
                }
                else if (dvobjright.length >= 1 && dvobjleft.length == 0 && dvobjcenter.length >= 1) {
                    // 3:1
                    $("#dvleft").append(dvobjright[0]);
                }
                else if (dvobjright.length >= 1 && dvobjleft.length >= 1 && dvobjcenter.length >= 1) {

                }


            }
            else if (t == 3) {
                $("#dvleft").css("width", "0");
                $("#dvcenter").css("width", "73%");
                $("#dvright").css("width", "24%");

                var dvobjleft = $("#dvleft").children("div");
                var dvobjcenter = $("#dvcenter").children("div");
                var dvobjright = $("#dvright").children("div");

                //  1:3
                if (dvobjleft.length >= 1 && dvobjcenter.length >= 1 && dvobjright.length == 0) {
                    var obj2 = $("#dvleft");
                    $("#dvright").append(obj2[0].innerHTML);
                    obj2[0].innerHTML = "";
                }
                else if (dvobjcenter.length >= 1 && dvobjright.length == 0 && dvobjleft.length == 0) {
                    //1:1:1
                    $("#dvright").append(dvobjcenter[0]);

                }
                else if (dvobjright.length >= 1 && dvobjleft.length == 0 && dvobjcenter.length >= 1) {
                    // 3:1


                }
                else if (dvobjright.length >= 1 && dvobjleft.length >= 1 && dvobjcenter.length >= 1) {
                    // 1:2:1

                    var obj2 = $("#dvleft");
                    $("#dvright").append(obj2[0].innerHTML);
                    obj2[0].innerHTML = "";
                }
            }
            else if (t == 4) {
                $("#dvleft").css("width", "0");
                $("#dvcenter").css("width", "97%");
                $("#dvright").css("width", "0");

                var obj1 = $("#dvleft");
                var obj2 = $("#dvright");


                if (obj1.length > 0) {
                    $("#dvcenter").append(obj1[0].innerHTML);
                }
                if (obj2.length > 0) {
                    $("#dvcenter").append(obj2[0].innerHTML);
                }
                obj1[0].innerHTML = "";
                obj2[0].innerHTML = "";
            }
        }


        function SetControlToOther(ofrom, oto) {
            var obj = ofrom[0].innerHTML;
            oto.append(obj);
            ofrom[0].innerHTML = "";
        }
     
      //保存当前布局cookie
        function setLayoutPosition() {
            var dvlist = "";
            $.each($(".dvallChild"), function (m) {
                dvlist += $(this).attr('id') + ":";
                $.each($(this).children(".dvChild"), function (n) {
                    dvlist += $(this).attr('id') + "@";
                });
                dvlist += ":" + $(this).css('width');
                dvlist += "|";
            });
            $.cookie("dvlist", dvlist)
            alert("保存成功");
        }

        //读取cookie
        function ReadLayoutPosition() {
            var dvlist = $.cookie("dvlist");
            if (dvlist != null) {
                //  document.write(dvlist);
                var arrayColumn = dvlist.split('|');
                $.each(arrayColumn, function (m, n) {
                    var elemId = n.split(':');
                    var arrRow = n.split(':')[1] ? n.split(':')[1].split('@') : "";
                    //获取宽度
                    $("#" + elemId).css("width", n.split(':')[2]);
                    $.each(arrRow, function (m, n) {
                        if (n) {
                            //把序列填加进容器
                            $("#" + elemId).append($("#" + n).attr('id', n));
                        }
                    });

                });
            }
        }

        function SetExpand() {

        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div style="padding-top: 10px; text-indent: 8px;">
        <a href="#none" οnclick="ControlLayout(1)">1:3</a> <a href="#none" οnclick="ControlLayout(2)">
            1:2:1</a> <a href="#none" οnclick="ControlLayout(3)">3:1</a> <a href="#none" οnclick="ControlLayout(4)">
                1:1:1</a>
    </div>
    <div>
        <input type="button" id="btnsetCook" value="保存位置" οnclick="setLayoutPosition()" />
    </div>
    <div id="dvAll">
        <div id="dvleft" style="width: 24%;" class="dvallChild">
            <div class="dvChild" id="c1">
                <div class="dvcontent">
                    <div class="dvtitlecls">
                        相册</div>
                    <div class="dvdocls" οnclick="SetExpand()">
                        --&nbsp;&nbsp;</div>
                </div>
                <div class="noremove" id="abc1">
                    <div class="dvFont">
                        内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                    </div>
                </div>
            </div>
            <div class="dvChild" id="c2">
                <div class="dvcontent">
                    <div class="dvtitlecls">
                        留言板</div>
                    <div class="dvdocls">
                        --&nbsp;&nbsp;</div>
                </div>
                <div class="noremove">
                    <div class="dvFont">
                        内容.内容.内容.内容.内容.内容.ss 内容.内容.内容.内容.内容.内容.ss 内容.内容.内容.内容.内容.内容.ss 内容.内容.内容.内容.内容.内容.ss
                        内容.内容.内容.内容.内容.内容.ss 内容.内容.内容.内容.内容.内容.ss 内容.内容.内容.内容.内容.内容.ss 内容.内容.内容.内容.内容.内容.ss
                        内容.内容.内容.内容.内容.内容.ss 内容.内容.内容.内容.内容.内容.ss 内容.内容.内容.内容.内容.内容.ss 内容.内容.内容.内容.内容.内容.ss
                        内容.内容.内容.内容.内容.内容.ssaa
                    </div>
                </div>
            </div>
        </div>
        <div id="dvcenter" style="width: 49%;" class="dvallChild">
            <div class="dvChild" id="c3">
                <div class="dvcontent">
                    <div class="dvtitlecls" >
                        个人中心</div>
                    <div class="dvdocls" >
                         --&nbsp;&nbsp;</div>
                </div>
                <div class="noremove">
                    <div class="dvFont">
                        内容.内容.内容.内容.内容.内容.ss 内容.内容.内容.内容.内容.内容.ss 内容.内容.内容.内容.内容.内容.ss 内容.内容.内容.内容.内容.内容.ss
                        内容.内容.内容.内容.内容.内容.ss 内容.内容.内容.内容.内容.内容.ss 内容.内容.内容.内容.内容.内容.ss 内容.内容.内容.内容.内容.内容.ss
                        内容.内容.内容.内容.内容.内容.ss 内容.内容.内容.内容.内容.内容.ss 内容.内容.内容.内容.内容.内容.ss 内容.内容.内容.内容.内容.内容.ss
                        内容.内容.内容.内容.内容.内容.ssaa
                    </div>
                </div>
            </div>
        </div>
        <div id="dvright" style="width: 24%;" class="dvallChild">
            <div class="dvChild" id="c4">
                <div class="dvcontent">
                    <div class="dvtitlecls">
                        QQ农场</div>
                    <div class="dvdocls">
                         --&nbsp;&nbsp;</div>
                </div>
                <div class="noremove">
                    <div class="dvFont">
                        内容.内容.内容.内容.内容.内容.ss 内容.内容.内容.内容.内容.内容.ss 内容.内容.内容.内容.内容.内容.ss 内容.内容.内容.内容.内容.内容.ss
                        内容.内容.内容.内容.内容.内容.ss 内容.内容.内容.内容.内容.内容.ss 内容.内容.内容.内容.内容.内容.ss 内容.内容.内容.内容.内容.内容.ss
                        内容.内容.内容.内容.内容.内容.ss 内容.内容.内容.内容.内容.内容.ss 内容.内容.内容.内容.内容.内容.ss 内容.内容.内容.内容.内容.内容.ss
                        内容.内容.内容.内容.内容.内容.ssaa
                    </div>
                </div>
            </div>
        </div>
    </div>
    </form>
</body>
</html>

转载于:https://www.cnblogs.com/syyblog/archive/2012/04/19/2456562.html

weixin_30421525
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
最新页面拖拽布局模板 支持拖拽DIV 修改布局格式 更换样式
02-25
在原作者ikaiser上优化，感谢ikaiser大神 目前已经支持根据JSON文件加载布局样式 AJAX请求里面的内容 设置布局格式121 31等 拖拽DIV调整布局 保存布局时console出JSON字符串。
sortablejs拖拽排序功能（vue）
C_fashionCat
05-15 3141
有些需求是要求有表格拖拽，或者是一些普通的楼层div拖拽 所以我们可以用sortablejs进行，官方文档为：http://www.sortablejs.com/ 一、下载 npm install sortablejs --save 二、使用 例子1: table拖拽（element-ui） <template> <div class="home"> <div class="floor"> <div class="column_box" v
jqueryUI的sortable实现div拖拽排序
ly_lv_hx的专栏
02-22 2982
在看了众多的基于jquery的sort插件后，本以为所有的排序插件只能针对ul--li标签进行排序，在google了jquery sortable div排序关键词之后，终于找到了用sortable实现div拖拽排序的方法。 步骤一：引入jqueryUI.js文件。 步骤二：编写html代码，如下所示； one two three four 步骤三：在js文件中调用sortable()
拖拽插件SortableJS的简单使用
weixin_30608503的博客
02-15 817
在项目中，经常会遇到一些涉及到拖拽的需求，github上面有一个开源的SortableJS的插件，支持Vue，React，Angular等多种框架，实现效果很好，基本可以满足大部分的需求，下面就第一次在jquery中的使用做个简单的demo记录。 引入文件Sortable.min.js 指定包裹容器的id 根据api开始创建使用即可 <!DOCTYPE html> <h...
【JS】使用sortable实现拖拽功能
夜_清澄的博客
07-05 2839
emmmmm 感觉自己是个被java耽误了的前端闲话少说 进入正题工作中有的时候需要实现一个拖拽功能 比如你有一个列表 然后忽然客户说 改需求了 这个列表顺序要变 你也不能说整个删了重新写一个列表吧 这多绝望啊 就有了几个解决方案：1.弄个图标上移下移function move(obj,fx) { var parent = $(obj).parents(".ui-state-default");...
Jquery Sortable实现div拖动排序效果
10-27
本篇文章将深入探讨如何使用 jQuery Sortable 实现div的拖动排序效果。 首先，你需要在项目中引入 jQuery 和 jQuery UI 的库。jQuery 是一个广泛使用的JavaScript库，而 jQuery UI 提供了包括Sortable在内的多种...
jquery ui sortable拖拽后保存位置
10-19
主要为大家详细介绍了jquery ui sortable拖拽后保存位置的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
div拖动排序插件jquery.sortable特效代码
03-20
在本文中，我们将深入探讨如何使用jQuery Sortable插件实现基于div元素的拖动排序功能，并结合后台交互，创建一个动态、用户友好的界面。jQuery Sortable是jQuery UI库的一部分，它提供了简单的方法来实现元素的拖放...
jquery中的sortable排序之后的保存状态的解决方法
10-29
其实在前年的这个时候，我就有用过这个sortable组件，那时候搞了个个人网站（可惜后来关了），首页就用到了这种拖拽的效果。
DIV自定义拖拽布局
11-26
DIV自定义拖拽布局，可随意拖动各栏目，
ASP AJAX网页DIV 模块拖动保存功能实例.rar
07-10
ASP AJAX网页DIV 模块拖动保存功能实例，当然也可清除保存的拖动数据，可恢复原状，调试注意：CDrag.mdb|News.asp|Pic.asp 这些是供测试的文件，需要在iis浏览才能看到效果，否则直接点击Index.htm看到相关效果，但是数据信息无法看到。
使用sortable进行拖动排序的demo
06-17
使用了sort进行拖动的控制 同时获取新的排序列表
Sortable.js拖拽排序使用方法解析
10-21
主要为大家详细解析了Sortable.js拖拽排序使用方法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
div 拖动+cookie保存
03-07
网站个性化 div可以随意拖动 cookie保存！
sortable.js 实现拖拽
花铛
09-15 7529
是一个 JavaScript 库，用于在现代浏览器和触摸设备上重新排序拖放列表。
div横向拖动 vue_vue实现div拖拽互换位置
最新发布
06-01
要实现 div 横向拖动并互换位置，可以使用 Vue.js 和一些 JavaScript 库来实现。 首先，你需要在 Vue.js 中创建一个拖动事件。你可以使用 `v-on:mousemove` 来监听鼠标移动事件，并使用 `v-on:mousedown` 来监听...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值