Div拖动/调整大小实例

简介:

出处:http://blog.163.com/xhy_cy/blog/static/10497623201171254719630/

 

 

<html>

<head>

<title>Div拖动/调整大小实例</title>

</head>

<script type="text/javascript">

    //保留的位置

    var saveLeft, saveTop, saveWidth, saveHeight;

    var theBody;

    var eventType;     //事件种类, "move""resize"

    var div;

 

    //创建并设定div的参数

    function setDiv()

    {

        //防止重复打开

        if (div)

        {

            return;

        }

        var newLeft, newTop, newWidth, newHeight;

        theBody = document.body;

 

        div = document.createElement("div");

        div.id = "panelDiv";

        div.style.position = "absolute";

        div.style.backgroundColor = "#E5E5E5"

        div.style.padding = "2px 5px 5px 2px";

        div.style.overflow = "hidden";

        div.style.zIndex = 1;

 

        //设定打开的大小和位置

        Function()

        {

            var openType = document.getElementById("radio1").checked ? 0 : 1;

            if (openType == 0)   //默认大小默认位置居中打开

            {

                newWidth = "300px";

                newHeight = "300px";

                newLeft = (theBody.clientWidth - parseInt(newWidth)) / 2 + "px";

                newTop = (theBody.clientHeight - parseInt(newHeight)) / 2 + "px";

            }

            else //存储的位置与大小

            {

                newWidth = saveWidth ? saveWidth : "300px";

                newHeight = saveHeight ? saveHeight : "300px";

                newLeft = saveLeft ? saveLeft : (theBody.clientWidth - parseInt(newWidth)) / 2 + "px";

                newTop = saveTop ? saveTop : (theBody.clientHeight - parseInt(newHeight)) / 2 + "px";

            }

            div.style.width = newWidth;

            div.style.height = newHeight;

            div.style.left = newLeft;

            div.style.top = newTop;

        }

        div = setChild(div);

        theBody.appendChild(div);

 

        var ipt = document.getElementsByTagName("input");

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

        {

            ipt.disabled = true;

        }

    }

 

    function setChild(div)

    {

        //可否移动、调整

        var isMove = document.getElementById("isMove").checked;

        var isResize = document.getElementById("isResize").checked;

 

        //底色

        var cDiv = document.createElement;

        var backDiv = cDiv("div");

        backDiv.style.cssText = "left: 0px; top: 0px; width: 100%; height: 100%; background-color: #F5F5F5;";

        div.appendChild(backDiv);

 

        //标题

        var topDiv = cDiv("div");

        topDiv.style.cssText = "left: 2px; top: 2px; width: 100%; height: 30px; position: absolute; background-color: #78ABFF; vertical-align: middle; z-index: 5";

        if (isMove)

        {

            topDiv.style.cursor = "move";

            topDiv.setAttribute("onmousedown"function () { setMove(this) });

        }

        else

        {

            topDiv.style.cursor = "default";

        }

        topDiv.innerHTML = "<span style='top: 5px; left:5px; font-size: 20px; font-weight: bold; color: #102548; position: relative;' onselectstart='return false'>标题栏</span>";

        div.appendChild(topDiv);

 

        //关闭按钮

        var closeDiv = cDiv("div");

        closeDiv.style.cssText = "right: 8px; top : 5px; width: 24px; height: 24px; position: absolute; background-color: #E4EEFF; border: #2D66C4 1px solid; text-align: center; vertical-align: middle; cursor: pointer; z-index: 10";

        closeDiv.setAttribute("onclick"function () { eCloseDiv() });

        closeDiv.innerHTML = "<span style='font-size: 20px; font-weight: bold; color: #0E377A;' title='Esc快捷键'>×</span>";

        div.appendChild(closeDiv);

 

        //内容

        var contentDiv = cDiv("div");

        contentDiv.style.cssText = "left: 2px; top: 35px; width: 100%; position: absolute; overflow: auto";

        contentDiv.style.height = (parseInt(div.style.height) - 40) + "px";

        contentDiv.innerHTML = "<table style='width: 100%; height: 100%; text-align: center; vertical-align: hidden'><tr><td><p>这里是内容区!</p><a href='javascript:saveDiv()'>保留这个位置和大小</a></td></tr></table>";

        div.appendChild(contentDiv);

 

        //调整大小

        var reDiv = cDiv("div");

        reDiv.style.cssText = "right: 0px; bottom: 0px; width: 5px; height: 5px; position: absolute;";

        if (isResize)

        {

            reDiv.style.cursor = "se-resize";

            reDiv.setAttribute("onmousedown"function () { setResize(this) });

        }

        else

        {

            reDiv.style.cursor = "default";

        }

        div.appendChild(reDiv);

 

        return div;

    }

 

    var oX, oY, oLeft, oTop, oWidth, oHeight; //存储原始移动前的位置

    var divClone, oDiv;   //克隆的节点和原始节点

    var oTime;

    //clone拖移的节点

    function setMove(obj)

    {

        if (event.button == 1)

        {

            if (oTime)

            {

               clearTimeout(oTime);

                divClone.parentNode.removeChild(divClone);

            }

            oDiv = obj.parentNode;

            divClone = oDiv.cloneNode(true);

            divClone.style.filter = "Alpha(opacity=50)";

            divClone.childNodes[1].setAttribute("onmousemove"function () { startMove(this) });

            divClone.childNodes[1].setAttribute("onmouseup"function () { endMove() });

            oX = parseInt(event.clientX);

            oY = parseInt(event.clientY);

            oLeft = parseInt(divClone.style.left);

            oTop = parseInt(divClone.style.top);

            document.body.appendChild(divClone);

            divClone.childNodes[1].setCapture();

            eventType = "move";

        }

    }

 

    //拖移

    function startMove(obj)

    {

        if (eventType == "move" && event.button == 1)

        {

            var moveDiv = obj.parentNode;

            moveDiv.style.left = (oLeft + event.clientX - oX) + "px";

            moveDiv.style.top = (oTop + event.clientY - oY) + "px";

        }

    }

 

    //拖移结束调用动画

    function endMove()

    {

        if (eventType == "move")

        {

            divClone.childNodes[1].releaseCapture();

            move(parseInt(divClone.style.left), parseInt(divClone.style.top));

            eventType = "";

        }

    }

 

    //移动的动画

    function move(aimLeft, aimTop)

    {

        var nowLeft = parseInt(oDiv.style.left);

        var nowTop = parseInt(oDiv.style.top);

        var moveSize = 30;

        if (nowLeft > aimLeft + moveSize || nowLeft < aimLeft - moveSize || nowTop > aimTop + moveSize || nowTop < aimTop - moveSize)

        {

            oDiv.style.left = aimLeft > nowLeft + moveSize ? (nowLeft + moveSize) +"px" : aimLeft < nowLeft - moveSize ? (nowLeft - moveSize) + "px" : nowLeft + "px";

            oDiv.style.top = aimTop > nowTop + moveSize ? (nowTop + moveSize) + "px" : aimTop < nowTop - moveSize ? (nowTop - moveSize) + "px" : nowTop + "px";

            oTime = setTimeout("move(" + aimLeft + ", " + aimTop + ")", 1);

        }

        else

        {

            oDiv.style.left = divClone.style.left;

            oDiv.style.top = divClone.style.top;

            divClone.parentNode.removeChild(divClone);

            divClone == null;

        }

    }

 

    //clone调整大小的节点

    function setResize(obj)

    {

        if (event.button == 1)

        {

            if (oTime)

            {

                clearTimeout(oTime);

                divClone.parentNode.removeChild(divClone);

            }

            oDiv = obj.parentNode;

            divClone = oDiv.cloneNode(true);

            divClone.style.filter = "Alpha(opacity=50)";

            divClone.childNodes[4].setAttribute("onmousemove"function () { startResize(this) });

            divClone.childNodes[4].setAttribute("onmouseup"function () { endResize() });

            oX = parseInt(event.clientX);

            oY = parseInt(event.clientY);

            oWidth = parseInt(divClone.style.width);

            oHeight = parseInt(divClone.style.height);

            document.body.appendChild(divClone);

            divClone.childNodes[4].setCapture();

            eventType = "resize";

        }

    }

 

    //拖动调整大小

    function startResize(obj)

    {

        if (eventType == "resize" && event.button == 1)

        {

            var nX = event.clientX;

            var nY = event.clientY;

            if (nX > oX - oWidth && nY > oY - oHeight + 40)

            {

                var resizeDiv = obj.parentNode;

                resizeDiv.style.width = (oWidth + event.clientX - oX) + "px";

                resizeDiv.style.height = (oHeight + event.clientY - oY) + "px";

                resizeDiv.childNodes[3].style.height = (parseInt(resizeDiv.style.height) - 40) + "px";

            }

        }

    }

 

    //调整大小结束

    function endResize()

    {

        if (eventType == "resize")

        {

            divClone.childNodes[4].releaseCapture();

            resize(parseInt(divClone.style.width), parseInt(divClone.style.height));

            eventType = "";

        }

    }

 

    //调整大小的动画

    function resize(aimWidth, aimHeight)

    {

        var nowWidth = parseInt(oDiv.style.width);

        var nowHeight = parseInt(oDiv.style.height);

        var resizeSize = 30;

        if (nowWidth > aimWidth + resizeSize || nowWidth < aimWidth - resizeSize || nowHeight > aimHeight + resizeSize || nowHeight < aimHeight - resizeSize)

        {

            oDiv.style.width = aimWidth > nowWidth + resizeSize ? (nowWidth + resizeSize) + "px" : aimWidth < nowWidth - resizeSize ? (nowWidth - resizeSize) + "px" : nowWidth + "px";

            oDiv.style.height = aimHeight > nowHeight + resizeSize ? (nowHeight + resizeSize) + "px" : aimHeight < nowHeight - resizeSize ? (nowHeight - resizeSize) + "px" : nowHeight + "px";

            oDiv.childNodes[3].style.height = (parseInt(oDiv.style.height) - 40) +"px";

            oTime = setTimeout("resize(" + aimWidth + ", " + aimHeight + ")", 1);

        }

        else

        {

            oDiv.style.width = divClone.style.width;

            oDiv.style.height = divClone.style.height;

            oDiv.childNodes[3].style.height = (parseInt(oDiv.style.height) - 40) +"px";

            divClone.parentNode.removeChild(divClone);

            divClone == null;

        }

    }

 

    //关闭DIV

    function eCloseDiv()

    {

        if (div)

        {

            div.parentNode.removeChild(div);

            var ipt = document.getElementsByTagName("input");

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

            {

                ipt.disabled = false;

            }

            div = null;

        }

    }

 

    //保留位置和大小

    function saveDiv()

    {

        if (div)

        {

            saveLeft = div.style.left;

            saveTop = div.style.top;

            saveWidth = div.style.width;

            saveHeight = div.style.height;

            alert("保留成功!");

        }

    }

 

    //快捷键

    document.onkeydown = function ()

    {

        event.keyCode == 27 ? eCloseDiv() : null;   //Esc快捷键

        event.ctrlKey && (event.keyCode == 83 || event.keyCode == 115) ? saveDiv() : null;//ctrl+s保存位置

        event.ctrlKey && event.keyCode == 13 ? setDiv() : null //ctrl+enter打开Div

        !event.ctrlKey && (event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40) ? arrowMove(event.keyCode) : null;

        event.ctrlKey && (event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40) ? arrowResize(event.keyCode) : null;

    }

 

    //上下左右箭头移动div

    function arrowMove(eKeyCode)

    {

        if (div)

        {

            var isMove = document.getElementById("isMove").checked;

            if (isMove)

            {

                switch (eKeyCode)

                {

                    case 37:

                        div.style.left = (parseInt(div.style.left) - 1) +"px"//left

                        break

                    case 38:

                        div.style.top = (parseInt(div.style.top) - 1) +"px"//up

                        break

                    case 39:

                        div.style.left = (parseInt(div.style.left) + 1) +"px"//right

                        break

                    case 40:

                        div.style.top = (parseInt(div.style.top) + 1) +"px"//down

                        break

                }

            }

        }

    }

 

    //ctrl+上下左右箭头调整div大小

    function arrowResize(eKeyCode)

    {

        if (div)

        {

            var isResize = document.getElementById("isResize").checked;

            if (isResize)

            {

                switch (eKeyCode)

                {

                    case 37:

                        div.style.width = (parseInt(div.style.width) - 1) +"px"//left

                        break

                    case 38:

                        div.style.height = (parseInt(div.style.height) - 1) + "px"//up

                        break

                    case 39:

                        div.style.width = (parseInt(div.style.width) + 1) +"px"//right

                        break

                    case 40:

                        div.style.height = (parseInt(div.style.height) + 1) + "px"//down

                        break

                }

            }

        }

    }

</script>

<body>

<p>

<input type="checkbox" id="isMove" /><label for="isMove">可移动</label>    

<input type="checkbox" id="isResize" /><label for="isResize">可调整大小</label>    

</p>

  

<p>

<input type="radio" name="radio" id="radio1" checked /><label for="radio1">默认居中打开</label>    

<input type="radio" name="radio" id="radio2" /><label for="radio2">保留位置上打开</label>

</p>

<p><a href="javascript:setDiv()">打开DIV</a></p>

<p style="font-weight: bold">操作说明:</p>

<ol>

<li>

   选中复选框(可移动、可调整大小)后,打开的DIV具有移动/调整大小的功能(此时移动/调整大小快捷键可使用);<br>

   反之,不可移动/调整大小(此时移动/调整大小快捷键无效)

</li>

<li>

   单选框默认居中打开选中,无论有无保存DIV位置和大小均以默认位置及大小打开DIV

</li>

<li>

   单选框保留位置上打开选中,如果未发现保存记录以默认方式打开,否则以保存的位置及大小打开

</li>

<li>

   如果选中可移动后,鼠标经过标题位置(蓝色背景)处会变成移动的图标,此时按住鼠标左键会产生一个半透明的DIV,按住鼠标不动拉动此半透明DIV会跟随移动,释放鼠标左键后会产生一段原始位置移动至半透明位置的动画,当动画重叠时,半透明的DIV将回收。

</li>

<li>

   如果选中可调整大小后,鼠标经过整个DIV的最右下角处会变成伸缩的图标,此时按住鼠标左键会产生一个半透明的DIV,按住鼠标不动拉动此半透明DIV会随着移动而调整大小,释放鼠标左键后会产生一段原始大小伸缩至半透明大小的动画,当动画重叠时,半透明的DIV将回收。

</li>

<li>

   DIV的右上角有关闭按钮,按下后DIVremove

</li>

</ol>

<p style="font-weight: bold">

快捷键说明:

<ol>

<li>

   Ctrl + Enter : 打开div

</li>

<li>

   Ctrl + s(大小写均可) : 保存div的大小和位置

</li>

<li>

   上下左右箭头 : 轻移div位置

</li>

<li>

   Ctrl + 上下左右箭头 : 轻调div大小

</li>

<li>

   Esc : 关闭Div

</li>

</ol>

</p>

</body>

</html>

 


本文转自火地晋博客园博客,原文链接:http://www.cnblogs.com/yelaiju/archive/2012/02/16/2354252.html,如需转载请自行联系原作者

目录
相关文章
|
16天前
|
JavaScript 前端开发
vue 页面下滚到目标元素的位置,目标元素自动吸顶(自动悬浮吸附到页面顶部)
vue 页面下滚到目标元素的位置,目标元素自动吸顶(自动悬浮吸附到页面顶部)
17 0
|
16天前
Element UI【详解】el-scrollbar 滚动条组件 —— 监听滚动条的滚动,跟随页面一起滚动,获取滚动距离,隐藏水平滚动条等
Element UI【详解】el-scrollbar 滚动条组件 —— 监听滚动条的滚动,跟随页面一起滚动,获取滚动距离,隐藏水平滚动条等
41 0
|
9月前
|
前端开发 JavaScript 容器
JavaScrpit如何实现弹出遮罩层后将页面固定到当前位置且无法继续滚动
JavaScrpit如何实现弹出遮罩层后将页面固定到当前位置且无法继续滚动
44 0
uniapp滑动到一定的高度后固定某个元素到顶部效果demo(整理)
uniapp滑动到一定的高度后固定某个元素到顶部效果demo(整理)
|
2月前
【sgDragSize】自定义组件:自定义拖拽修改DIV尺寸组件,适用于窗体大小调整
【sgDragSize】自定义组件:自定义拖拽修改DIV尺寸组件,适用于窗体大小调整
|
8月前
|
JavaScript
checkbox选中和取消,控制dom元素颜色变化
checkbox选中和取消,控制dom元素颜色变化
35 0
|
8月前
|
前端开发
css滚动到顶部自动固定
css滚动到顶部自动固定
判断滚动条距离顶部为0执行事件jq--滚动到顶部的距离
判断滚动条距离顶部为0执行事件jq--滚动到顶部的距离
|
12月前
layui列表页滚动时弹出窗无法居中的解决方案
layui列表页滚动时弹出窗无法居中的解决方案
100 0
|
JavaScript
js 实现上下拖动改变父 div 的高度,左右上下拖动动态分割孩子的宽高
js 实现上下拖动改变父 div 的高度,左右上下拖动动态分割孩子的宽高
524 0
js 实现上下拖动改变父 div 的高度,左右上下拖动动态分割孩子的宽高

热门文章

最新文章