JS实践——拖拽

来源：互联网发布：cad软件手机版编辑：程序博客网时间：2024/06/05 03:50

大体思路

1. 鼠标按下`onmousedown事件`

在该事件，我们需要

计算鼠标相对于元素左上角的坐标（clientX和clientY），
标记元素为可拖动

2. 鼠标移动`onmousedown事件`

在该事件，我们需要

检测元素是否标记为移动
更新元素的位置，到当前鼠标的位置（鼠标当前位置 - 鼠标相对元素的位置）

3. 限制区域

在上面的鼠标移动事件，我们还需要对元素的移动范围做出限制。

首先，页面可移动宽高（窗口宽高 - 元素宽高）；

然后，对move值做限制，最大为页面可移动宽高值，最小值为0。

4. 鼠标松开`onmouseup事件`

把元素标记为不可移动。

代码实现

<html><head>    <meta charset="utf-8">    <title>选项卡</title><style>        body , html ,div {margin: 0; padding: 0;}        .box{            height: 500px;            width:600px;            border: 5px solid red;            display：table;             left:200px;            top:200px;            position:absolute;        }        .tit{            height:100px;            background-color:yellow;            text-align:center;        }        .tips{            line-height: 100px;         }        .con{            background-color:green;            height:400px;            text-align:center;        }        .conTxt{            line-height: 400px;         }    </style>    <script>    window.onload = function(){              //全局变量         var isDraging = false;  //  是否可拖拽的标记         var oBox = document.getElementById("box1");         var oTit = document.getElementById("oTit");        //鼠标按下        oTit.onmousedown = function(e){            e = event || window.event;            //鼠标相对于标题栏左上角的坐标            mouseOffsetX = e.clientX - oBox.offsetLeft;            mouseOffsetY = e.clientY - oBox.offsetTop;            //可移动            isDraging = true;        }        //移动事件        document.onmousemove = function( e ){            var e = e || window.event;            var oBox = document.getElementById("box1");            // 鼠标当前的位置            var mouseX = e.clientX;               var mouseY = e.clientY;            //  浮层元素的新位置            var moveX = 0;              var moveY = 0;            if( isDraging === true ){                moveX = mouseX - mouseOffsetX;                moveY = mouseY - mouseOffsetY;                //限制范围                //获取窗口宽高                winW=document.documentElement.clientWidth || document.body.clientWidth,                winH=document.documentElement.clientHeight || document.body.clientHeight,                //移动最大宽高                maxX=winW-oBox.offsetWidth,                maxY=winH-oBox.offsetHeight;                //move取值限制                              moveX = Math.min(maxX,Math.max(0,moveX));                moveY = Math.min(maxY,Math.max(0,moveY));                //改变元素宽高                                oBox.style.left = moveX + 'px';                oBox.style.top  = moveY + 'px';            }        }        //鼠标松开        document.onmouseup = function(){            isDraging = false;        }           }        </script></head>    <body>        <div class = "box" id = "box1">            <div class = "tit" id = "oTit"><span class = "tips">在此区域按下鼠标，可以拖拽。</span></div>            <div class = "con"><span class = "conTxt">这是内容区域</span></div>        </div>    </body></html>

阅读全文

0 0

JS实践——拖拽

大体思路

1. 鼠标按下onmousedown事件

2. 鼠标移动onmousedown事件

3. 限制区域

4. 鼠标松开onmouseup事件

代码实现

1. 鼠标按下`onmousedown事件`

2. 鼠标移动`onmousedown事件`

4. 鼠标松开`onmouseup事件`