首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JS仿iGoogle自定义首页模块拖拽特效的方法

Posted in Javascript onFebruary 13, 2015

本文实例讲述了JS仿iGoogle自定义首页模块拖拽特效的方法。分享给大家供大家参考。具体实现方法如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>JS仿iGoogle自定义首页模块拖拽效果</title>

    <script type="text/javascript">

        var Common = {

            getEvent: function() {//ie/ff

                if (document.all) {

                    return window.event;

                }

                func = getEvent.caller;

                while (func != null) {

                    var arg0 = func.arguments[0];

                    if (arg0) {

                        if ((arg0.constructor == Event || arg0.constructor == MouseEvent) || (typeof (arg0) == "object" && arg0.preventDefault && arg0.stopPropagation)) {

                            return arg0;

                        }

                    }

                    func = func.caller;

                }

                return null;

            },

            getMousePos: function(ev) {

                if (!ev) {

                    ev = this.getEvent();

                }

                if (ev.pageX || ev.pageY) {

                    return {

                        x: ev.pageX,

                        y: ev.pageY

                    };

                }
                if (document.documentElement && document.documentElement.scrollTop) {

                    return {

                        x: ev.clientX + document.documentElement.scrollLeft - document.documentElement.clientLeft,

                        y: ev.clientY + document.documentElement.scrollTop - document.documentElement.clientTop

                    };

                }

                else if (document.body) {

                    return {

                        x: ev.clientX + document.body.scrollLeft - document.body.clientLeft,

                        y: ev.clientY + document.body.scrollTop - document.body.clientTop

                    };

                }

            },

            getElementPos: function(el) {

                el = this.getItself(el);

                var _x = 0, _y = 0;

                do {

                    _x += el.offsetLeft;

                    _y += el.offsetTop;

                } while (el = el.offsetParent);

                return { x: _x, y: _y };

            },

            getItself: function(id) {

                return "string" == typeof id ? document.getElementById(id) : id;

            },

            getViewportSize: { w: (window.innerWidth) ? window.innerWidth : (document.documentElement && document.documentElement.clientWidth) ? document.documentElement.clientWidth : (document.body?document.body.offsetWidth:0), h: (window.innerHeight) ? window.innerHeight : (document.documentElement && document.documentElement.clientHeight) ? document.documentElement.clientHeight : (document.body ? document.body.offsetHeight : 0) },

            isIE: document.all ? true : false,

            setOuterHtml: function(obj, html) {

                var Objrange = document.createRange();

                obj.innerHTML = html;

                Objrange.selectNodeContents(obj);

                var frag = Objrange.extractContents();

                obj.parentNode.insertBefore(frag, obj);

                obj.parentNode.removeChild(obj);

            },

            firstChild: function(parentObj, tagName) {

                if (Common.isIE) {

                    return parentObj.firstChild;

                }

                else {

                    var arr = parentObj.getElementsByTagName(tagName);

                    return arr[0];

                }

            },

            lastChild: function(parentObj, tagName) {

                if (Common.isIE) {

                    return parentObj.lastChild;

                }

                else {

                    var arr = parentObj.getElementsByTagName(tagName);

                    return arr[arr.length - 1];

                }

            },

            setCookie: function(name, value) {

                document.cookie = name + "=" + value;

            },

            getCookie: function(name) {

                var strCookie = document.cookie;

                var arrCookie = strCookie.split("; ");

                for (var i = 0; i < arrCookie.length; i++) {

                    var arr = arrCookie[i].split("=");

                    if (!arr[1]) {

                        return "";

                    }

                    if (arr[0] == name) {

                        return arr[1];

                    }

                }

                return "";

            },

            delCookie: function(name) {

                var exp = new Date();

                exp.setTime(exp.getTime() - 1);

                var cval = this.getCookie(name);

                if (cval != null) document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();

            }

        }

        var Class = {

            create: function() {

                return function() { this.init.apply(this, arguments); }

            }

        }

        var Drag = Class.create();

        Drag.prototype = {

            init: function(titleBar, dragDiv, Options) {

                //设置点击是否透明，默认透明60%

                titleBar = Common.getItself(titleBar);

                dragDiv = Common.getItself(dragDiv);

                this.dragArea = { maxLeft: -9999, maxRight: 9999, maxTop: -9999, maxBottom: 9999 };

                if (Options) {

                    this.opacity = Options.opacity ? (isNaN(parseInt(Options.opacity)) ? 100 : parseInt(Options.opacity)) : 100;

                    if (Options.area) {

                        if (Options.area.left && !isNaN(parseInt(Options.area.left))) { this.dragArea.maxLeft = Options.area.left };

                        if (Options.area.right && !isNaN(parseInt(Options.area.right))) { this.dragArea.maxRight = Options.area.right };

                        if (Options.area.top && !isNaN(parseInt(Options.area.top))) { this.dragArea.maxTop = Options.area.top };

                        if (Options.area.bottom && !isNaN(parseInt(Options.area.bottom))) { this.dragArea.maxBottom = Options.area.bottom };

                    }

                }

                else {

                    this.opacity = 60;

                }

                this.originDragDiv = null;

                this.tmpX = 0;

                this.tmpY = 0;

                this.moveable = false;

                this.dragArray = [];
                var dragObj = this;

                var dragTbl = document.getElementById("dragTable");
                titleBar.onmousedown = function(e) {

                    var ev = e || window.event || Common.getEvent();

                    //只允许通过鼠标左键进行拖拽,IE鼠标左键为1 FireFox为0

                    if (Common.isIE && ev.button == 1 || !Common.isIE && ev.button == 0) {

                    }

                    else {

                        return false;

                    }
                    //处理特殊情况：在最上/下面MOVE时不碰到现有DIV的情况下，又回到起始拖拽的列最上/下方

                    var tmpColId;

                    for (c = 0; c < dragTbl.rows[0].cells.length; c++) {

                        for (k = 0; k < dragTbl.rows[0].cells[c].getElementsByTagName("DIV").length; k++) {

                            if (dragDiv.id == dragTbl.rows[0].cells[c].getElementsByTagName("DIV")[k].id) {

                                tmpColId = c;

                                break;

                            }

                        }

                    }

                    var tmpPosFirstChild = Common.getElementPos(Common.firstChild(dragTbl.rows[0].cells[tmpColId], "DIV"));

                    var tmpPosLastChild = Common.getElementPos(Common.lastChild(dragTbl.rows[0].cells[tmpColId], "DIV"));

                    var tmpObj = { colId: tmpColId, firstChildUp: tmpPosFirstChild.y, lastChildDown: tmpPosLastChild.y + Common.lastChild(dragTbl.rows[0].cells[tmpColId], "DIV").offsetHeight };
                    //保存当前可拖拽各容器的所在位置

          dragObj.dragArray = dragObj.RegDragsPos();
                    //插入虚线框

                    var dashedElement = document.createElement("div");

                    dashedElement.style.cssText = dragDiv.style.cssText;

                    dashedElement.style.border = " dashed 2px #aaa ";

                    dashedElement.style.marginBottom = "6px";

                    dashedElement.style.width = dragDiv.offsetWidth - 2 * parseInt(dashedElement.style.borderWidth) + "px"; //减去boderWidth使虚线框大小保持与dragDiv一致

         dashedElement.style.height = dragDiv.offsetHeight - 2 * parseInt(dashedElement.style.borderWidth) + "px"; //加上px 保证FF正确                    

          dashedElement.style.position = "relative";

                    if (dragDiv.nextSibling) {

                        dragDiv.parentNode.insertBefore(dashedElement, dragDiv.nextSibling);

                    }

                    else {

                        dragDiv.parentNode.appendChild(dashedElement);

                    }

                    //拖动时变为absolute

                    dragDiv.style.width = dragDiv.offsetWidth + "px";

                    dragDiv.style.position = "absolute";


                    dragObj.moveable = true;

                    dragDiv.style.zIndex = dragObj.GetZindex() + 1;
                    var downPos = Common.getMousePos(ev);

                    dragObj.tmpX = downPos.x - dragDiv.offsetLeft;

                    dragObj.tmpY = downPos.y - dragDiv.offsetTop;
                    if (Common.isIE) {

                        dragDiv.setCapture();

                    } else {

                        window.captureEvents(Event.mousemove);

                    }
                    dragObj.SetOpacity(dragDiv, dragObj.opacity);
                    //FireFox 去除容器内拖拽图片问题

                    if (ev.preventDefault) {

                        ev.preventDefault();

                        ev.stopPropagation();

                    }
                    document.onmousemove = function(e) {

                        if (dragObj.moveable) {

                            var ev = e || window.event || Common.getEvent();

                            //IE 去除容器内拖拽图片问题

                            if (document.all) //IE

                            {

                                ev.returnValue = false;

                            }
                            var movePos = Common.getMousePos(ev);

                            dragDiv.style.left = Math.max(Math.min(movePos.x - dragObj.tmpX, dragObj.dragArea.maxRight), dragObj.dragArea.maxLeft) + "px";

                            dragDiv.style.top = Math.max(Math.min(movePos.y - dragObj.tmpY, dragObj.dragArea.maxBottom), dragObj.dragArea.maxTop) + "px";
                            var targetDiv = null;

                            for (var k = 0; k < dragObj.dragArray.length; k++) {

                                if (dragDiv == dragObj.dragArray[i]) {

                                    continue;

                                }
                                if (movePos.x > dragObj.dragArray[k].PosLeft && movePos.x < dragObj.dragArray[k].PosLeft + dragObj.dragArray[k].PosWidth

                                    && movePos.y > dragObj.dragArray[k].PosTop && movePos.y < dragObj.dragArray[k].PosTop + dragObj.dragArray[k].PosHeight

                                ) {

                                    targetDiv = document.getElementById(dragObj.dragArray[k].DragId);

                                    if (movePos.y < dragObj.dragArray[k].PosTop + dragObj.dragArray[k].PosHeight / 2) {

                                        //往上移

                                        dashedElement.style.width = targetDiv.offsetWidth - 2 * parseInt(dashedElement.style.borderWidth) + "px";

                                        targetDiv.parentNode.insertBefore(dashedElement, targetDiv);

                                    }

                                    else {

                                        //往下移

                                        dashedElement.style.width = targetDiv.offsetWidth - 2 * parseInt(dashedElement.style.borderWidth) + "px";

                                        if (targetDiv.nextSibling) {

                                            targetDiv.parentNode.insertBefore(dashedElement, targetDiv.nextSibling);

                                        }

                                        else {

                                            targetDiv.parentNode.appendChild(dashedElement);

                                        }

                                    }

                                }

                            }

                            

                            for (j = 0; j < dragTbl.rows[0].cells.length; j++) {

                                var startLeft = Common.getElementPos(dragTbl.rows[0].cells[j]).x;

                                if (movePos.x > startLeft && movePos.x < startLeft + dragTbl.rows[0].cells[j].offsetWidth) {

                                    ///列无DIV

                                    if (dragTbl.rows[0].cells[j].getElementsByTagName("div").length == 0) {

                                        dashedElement.style.width = dragTbl.rows[0].cells[j].offsetWidth - 2 * parseInt(dashedElement.style.borderWidth) + "px";

                                        dragTbl.rows[0].cells[j].appendChild(dashedElement);

                                    }

                                    else {

                                        var posFirstChild = Common.getElementPos(Common.firstChild(dragTbl.rows[0].cells[j], "DIV"));

                                        var posLastChild = Common.getElementPos(Common.lastChild(dragTbl.rows[0].cells[j], "DIV"));

                                        //处理特殊情况：在最上/下面MOVE时不碰到现有DIV的情况下，又回到起始拖拽的列最上/下方

                                        var tmpUp, tmpDown;

                                        if (tmpObj.colId == j) {

                                            tmpUp = tmpObj.firstChildUp;

                                            tmpDown = tmpObj.lastChildDown;

                                        }

                                        else {

                                            tmpUp = posFirstChild.y;

                                            tmpDown = posLastChild.y + Common.lastChild(dragTbl.rows[0].cells[j], "DIV").offsetHeight;

                                        }
                                        if (movePos.y < tmpUp) {///从最上面插入虚线框

                                            dashedElement.style.width = Common.firstChild(dragTbl.rows[0].cells[j], "DIV").offsetWidth - 2 * parseInt(dashedElement.style.borderWidth) + "px";

                                            dragTbl.rows[0].cells[j].insertBefore(dashedElement, Common.firstChild(dragTbl.rows[0].cells[j], "DIV"));

                                        }

                                        else if (movePos.y > tmpDown) {///从最下面插入虚线框

                                            dashedElement.style.width = Common.lastChild(dragTbl.rows[0].cells[j], "DIV").offsetWidth - 2 * parseInt(dashedElement.style.borderWidth) + "px";

                                            dragTbl.rows[0].cells[j].appendChild(dashedElement);

                                        }
                                    }

                                }

                            }

                        }

                    };
                    document.onmouseup = function() {

                        if (dragObj.moveable) {

                            if (Common.isIE) {

                                dragDiv.releaseCapture();

                            }

                            else {

                                window.releaseEvents(dragDiv.mousemove);

                            }

                            dragObj.SetOpacity(dragDiv, 100);

                            dragObj.moveable = false;

                            dragObj.tmpX = 0;

                            dragObj.tmpY = 0;
                            //务必写在此IF内

                            dragDiv.style.left = "";

                            dragDiv.style.top = "";
                            dragDiv.style.width = "";

                            dragDiv.style.position = "";  

                            dashedElement.parentNode.insertBefore(dragDiv, dashedElement);

                            dashedElement.parentNode.removeChild(dashedElement);

                        }
                    };
                }

            },

            SetOpacity: function(dragDiv, n) {

                if (Common.isIE) {

                    dragDiv.filters.alpha.opacity = n;

                }

                else {

                    dragDiv.style.opacity = n / 100;

                }
            },

            GetZindex: function() {

                var maxZindex = 0;

                var divs = document.getElementsByTagName("div");

                for (z = 0; z < divs.length; z++) {

                    maxZindex = Math.max(maxZindex, divs[z].style.zIndex);

                }

                return maxZindex;

            },

            RegDragsPos: function() {

                var arrDragDivs = new Array();

                var dragTbl = document.getElementById("dragTable");

                var tmpDiv, tmpPos;

                for (i = 0; i < dragTbl.getElementsByTagName("div").length; i++) {

                    tmpDiv = dragTbl.getElementsByTagName("div")[i];

                    if (tmpDiv.className == "dragDiv") {

                        tmpPos = Common.getElementPos(tmpDiv);

                        arrDragDivs.push({ DragId: tmpDiv.id, PosLeft: tmpPos.x, PosTop: tmpPos.y, PosWidth: tmpDiv.offsetWidth, PosHeight: tmpDiv.offsetHeight });

                    }

                }

                return arrDragDivs;

            }

        }
        window.onload = function() {

            var dragTbl = document.getElementById("dragTable");

            if (Common.getCookie("configArr")) {

                var configArr = eval("(" + Common.getCookie("configArr") + ")");

                for (i = 0; i < dragTbl.rows[0].cells.length; i++) {

                    for (j = 0; j < configArr[i].length; j++) {

                        dragTbl.rows[0].cells[i].appendChild(document.getElementById(configArr[i][j]));

                    }

                }

            }

            new Drag("titleBar1", "dragDiv1");

            new Drag("titleBar2", "dragDiv2");

            new Drag("titleBar3", "dragDiv3");

            new Drag("titleBar4", "dragDiv4");

            new Drag("titleBar5", "dragDiv5");

        }
        window.onunload = function() {

            var dragTbl = document.getElementById("dragTable");

            var configArr = "";

            for (i = 0; i < dragTbl.rows[0].cells.length; i++) {

                var tmpStr = "";

                for (j = 0; j < dragTbl.rows[0].cells[i].getElementsByTagName("DIV").length; j++) {

                    tmpStr += (tmpStr == "" ? "" : ",") + "'" + dragTbl.rows[0].cells[i].getElementsByTagName("DIV")[j].id + "'";

                }

                configArr += (configArr == "" ? "" : ",") + "[" + tmpStr + "]";

            }

            //format like: [['dragDiv3','dragDiv5'],['dragDiv4','dragDiv1'],['dragDiv2']]

            Common.setCookie("configArr", "[" + configArr + "]");            

        }

    </script>

    <style type="text/css">

    .spanDiv{

    position:relative;

    width:5px;

    height:5px;

    }
    .dragDiv,.nodragDiv{

    position:relative;

    filter:alpha(opacity=100);

    opacity:1;

    margin-bottom:6px;

    background-color:#FFFFFF;

    }

    </style>

</head>

<body > 

<script type="text/javascript">
</script>   

    <table id="dragTable" cellpadding="3"  style=" border:solid 0px green;width:98%;">

        <tr>

            <td valign="top" style="width:30%">

                <div class="dragDiv" id="dragDiv1" >

                    <table cellpadding="0" cellspacing="0" border="1" style="width:100%;border-collapse:collapse; border-color:Blue">

                        <tr id="titleBar1"  style="height:22px; text-align:left; background-color:#547BC9;color:White; padding:3px;cursor:move;">

                            <th align="left" unselectable="on" >Title1</th>

                        </tr>

                        <tr style="height:130px;padding:3px;" align="left" valign="top" >

                            <td unselectable="on">这里的字比较长....我来了....中国....中国...外国.，看一下有没有溢出></td> 

                        </tr>

                    </table>

                </div>               

                <div class="dragDiv" id="dragDiv2">

                    <table cellpadding="0" cellspacing="0" border="1" style="width:100%;border-collapse:collapse; border-color:Blue">

                        <tr id="titleBar2" style="height:22px; text-align:left; background-color:#547BC9;color:White; padding:3px;cursor:move;">

                            <th align="left" unselectable="on" >Title2</th>

                        </tr>

                        <tr style="height:130px;padding:3px;" align="left" valign="top" >

                            <td unselectable="on">Content2...</td> 

                        </tr>

                    </table>

                </div>

            </td>

            <td valign="top" style="width:50%">

                <div class="dragDiv" id="dragDiv3">

                    <table cellpadding="0" cellspacing="0" border="1" style="width:100%;border-collapse:collapse; border-color:Blue">

                        <tr id="titleBar3" style="height:22px; text-align:left; background-color:#547BC9;color:White; padding:3px;cursor:move;">

                            <th align="left" unselectable="on" >Title3</th>

                        </tr>

                        <tr style="height:230px;padding:3px;" align="left" valign="top" >

                            <td unselectable="on">Content3...</td> 

                        </tr>

                    </table>

                </div>                

            </td>

            <td valign="top" style="width:20%">

                <div class="dragDiv" id="dragDiv4">

                    <table cellpadding="0" cellspacing="0" border="1" style="width:100%;border-collapse:collapse; border-color:Blue">

                        <tr id="titleBar4" style="height:22px; text-align:left; background-color:#547BC9;color:White; padding:3px;cursor:move;">

                            <th align="left" unselectable="on" >Title4</th>

                        </tr>

                        <tr style="height:130px;padding:3px;" align="left" valign="top" >

                            <td unselectable="on">Content4...</td> 

                        </tr>

                    </table>

                </div>

                <div class="dragDiv" id="dragDiv5">

                    <table cellpadding="0" cellspacing="0" border="1" style="width:100%;border-collapse:collapse; border-color:Blue">

                        <tr id="titleBar5" style="height:22px; text-align:left; background-color:#547BC9;color:White; padding:3px;cursor:move;">

                            <th align="left" unselectable="on" >Title5</th>

                        </tr>

                        <tr style="height:130px;padding:3px;" align="left" valign="top" >

                            <td unselectable="on">Content5...</td> 

                        </tr>

                    </table>

                </div>

            </td>

        </tr>    

    </table>

</body>

</html>
<br><br><hr> 收集于互联网，只为兴趣与学习交流，不作商业用途。</font></p>

希望本文所述对大家的javascript程序设计有所帮助。

JS仿iGoogle自定义首页模块拖拽特效的方法

- Author -

代码家园

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript去掉空格的方法集合
Dec 28 Javascript
JS获取并操作iframe中元素的方法
Mar 21 Javascript
当前页禁止复制粘贴截屏代码小集
Jul 24 Javascript
jquery获取一个元素下面相同子元素的个数代码
Jul 31 Javascript
IE6-IE9使用JSON、table.innerHTML所引发的问题
Dec 22 Javascript
JavaScript知识点总结(五)之Javascript中两个等于号(==)和三个等于号(===)的区别
May 31 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
Nov 25 Javascript
深入浅析AngularJS中的一次性数据绑定 (bindonce)
May 11 Javascript
深入解析ES6中的promise
Nov 08 Javascript
JavaScript惰性载入函数实例分析
Mar 27 Javascript
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
May 31 Javascript
解决Vue router-link绑定事件不生效的问题
Jul 22 Javascript
JS弹出可拖拽可关闭的div层完整实例
Feb 13 #Javascript
AngularJS表单编辑提交功能实例
Feb 13 #Javascript
javascript转换日期字符串为Date日期对象的方法
Feb 13 #Javascript
jQuery动态修改超链接地址的方法
Feb 13 #Javascript
jQuery实现contains方法不区分大小写的方法
Feb 13 #Javascript
javascript获取元素离文档各边距离的方法
Feb 13 #Javascript
jQuery点缩略图弹出层显示大图片
Feb 13 #Javascript
触发器(3) 数据类型(8) metaclass(1) Geospatial(1) XML(1) 自动化(1) IOC(3) Hash(1) zip(1) Bean(3)
You might like
php $_SERVER[&quot;REQUEST_URI&quot;]获取值的通用解决方法
2010/06/21 PHP
《PHP编程最快明白》第四讲：日期、表单接收、session、cookie
2010/11/01 PHP
php插入含有特殊符号数据的处理方法
2016/11/24 PHP
php生成网页桌面快捷方式
2017/05/05 PHP
jQuery select控制插件
2009/08/17 Javascript
原始XMLHttpRequest方法详情回顾
2013/11/28 Javascript
javascript中apply和call方法的作用及区别说明
2014/02/14 Javascript
jQuery的事件委托实例分析
2015/07/15 Javascript
jQuery基于ajax实现带动画效果无刷新柱状图投票代码
2015/08/10 Javascript
文本框只能输入数字的js代码(含小数点)
2016/07/10 Javascript
Bootstrap基本样式学习笔记之按钮(4)
2016/12/07 Javascript
详解React项目的服务端渲染改造(koa2+webpack3.11)
2018/03/19 Javascript
vue实现动态添加数据滚动条自动滚动到底部的示例代码
2018/07/06 Javascript
JS实现百度网盘任意文件强制下载功能
2018/08/31 Javascript
微信小程序进入广告实现代码实例
2019/09/19 Javascript
细述Javascript的加法运算符的具体使用
2019/10/18 Javascript
react MPA 多页配置详解
2019/10/18 Javascript
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
2020/04/29 Javascript
jQuery实现鼠标拖拽登录框移动效果
2020/09/13 jQuery
[00:26]TI7不朽珍藏III——冥界亚龙不朽展示
2017/07/15 DOTA
python爬虫入门教程--HTML文本的解析库BeautifulSoup（四）
2017/05/25 Python
python切片及sys.argv[]用法详解
2018/05/25 Python
利用Python进行数据可视化常见的9种方法！超实用！
2018/07/11 Python
如何关掉pycharm中的python console(图解)
2019/10/31 Python
pycharm显示远程图片的实现
2019/11/04 Python
如何理解Python中的变量
2020/06/01 Python
基于Keras中Conv1D和Conv2D的区别说明
2020/06/19 Python
python实现快速文件格式批量转换的方法
2020/10/16 Python
Html5如何唤起百度地图App的方法
2019/01/27 HTML / CSS
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
2020/04/10 HTML / CSS
公司面试感谢信
2014/02/01 职场文书
责任心演讲稿
2014/05/14 职场文书
小学生志愿者活动方案
2014/08/23 职场文书
小学生清明节演讲稿
2014/09/05 职场文书
工作作风整顿个人剖析材料
2014/10/11 职场文书
Redis做数据持久化的解决方案及底层原理
2021/07/15 Redis