首页
所有分类
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 动态创建VML的方法
Oct 14 Javascript
JQuery判断子iframe何时加载完成解决方案
Aug 20 Javascript
JavaScript字符串对象charAt方法入门实例（用于取得指定位置的字符）
Oct 17 Javascript
js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
Sep 02 Javascript
AngualrJS中每次$http请求时的一个遮罩层Directive
Jan 26 Javascript
jQuery基于扩展简单实现倒计时功能的方法
May 14 Javascript
关于JS中二维数组的声明方法
Sep 24 Javascript
JavaScript贪吃蛇小组件实例代码
Aug 20 Javascript
vue代理和跨域问题的解决
Jul 18 Javascript
微信小程序实现搜索指定景点周边美食、酒店
May 18 Javascript
jQuery中使用validate插件校验表单功能
May 24 jQuery
js实现文章目录索引导航(table of content)
May 10 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
限流器(1) into outfile(1) 匹配(1) 异步机制(1) geoserver(1) 全表扫描(1) sql模式(1) 远程连接(2) 逻辑备份(1) 索引树扫描(1)
You might like
三个类概括PHP的五种设计模式
2012/09/05 PHP
php环境下利用session防止页面重复刷新的具体实现
2014/01/09 PHP
php each 返回数组中当前的键值对并将数组指针向前移动一步实例
2016/11/22 PHP
php base64 编码与解码实例代码
2017/03/21 PHP
php文件上传类的分享
2017/07/06 PHP
laravel 中如何使用ajax和vue总结
2017/08/16 PHP
php+ajax实现商品对比功能示例
2019/04/13 PHP
用js判断浏览器是否是IE的比较好的办法
2007/05/08 Javascript
javascript数组遍历for与for in区别详解
2014/12/04 Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
2015/08/21 Javascript
Jquery 全选反选实例代码
2015/11/19 Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
2016/08/23 Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
2016/09/20 Javascript
Vue异步组件使用详解
2017/04/08 Javascript
AngularJS中controller控制器继承的使用方法
2017/11/03 Javascript
vue 项目常用加载器及配置详解
2018/01/22 Javascript
vue+SSM实现验证码功能
2018/12/07 Javascript
JavaScript模板引擎原理与用法详解
2018/12/24 Javascript
微信小程序与webview交互实现支付功能
2019/06/07 Javascript
python回调函数用法实例分析
2015/05/09 Python
Python数据类型之列表和元组的方法实例详解
2019/07/08 Python
使用Python进行中文繁简转换的实现代码
2019/10/18 Python
python 浅谈serial与stm32通信的编码问题
2019/12/18 Python
python 日志 logging模块详细解析
2020/03/31 Python
详解使用python3.7配置开发钉钉群自定义机器人(2020年新版攻略)
2020/04/01 Python
Python中使用filter过滤列表的一个小技巧分享
2020/05/02 Python
Tensorflow实现将标签变为one-hot形式
2020/05/22 Python
英国时尚和家居用品零售商：Matalan
2021/02/28 全球购物
How TDD works
2012/09/30 面试题
护士毕业自我鉴定
2014/02/07 职场文书
党员教师群众路线思想汇报范文
2014/10/28 职场文书
2014年销售经理工作总结
2014/12/01 职场文书
2015自愿离婚协议书范本
2015/01/28 职场文书
2015毕业寄语大全
2015/02/26 职场文书
vue如何实现关闭对话框后刷新列表
2022/04/08 Vue.js
关于mysql中string和number的转换问题
2022/06/14 MySQL