模块拖动鼠标位置，对象位置（实录五）

最新推荐文章于 2021-05-27 10:41:21 发布

churanlu1875

最新推荐文章于 2021-05-27 10:41:21 发布

阅读量115

点赞数

文章标签： xhtml javascript ViewUI

原文链接：https://my.oschina.net/u/3427060/blog/1489306

版权

拖拽--Clone http://www.fgm.cc/learn/lesson8/02.html

<!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>拖拽--Clone</title>
    <style type="text/css">
    body,
    div {
        margin: 0;
        padding: 0;
    }
    
    body {
        background: #3e3e3e;
    }
    
    div {
        position: absolute;
        width: 100px;
        height: 100px;
        cursor: move;
        /*border: 1px solid #888;*/
        background: #fff;
    }
    
    #drag1 {
        top: 100px;
        left: 100px;
    }
    
    #drag2 {
        top: 100px;
        left: 300px;
    }
    
    #temp {
        opacity: 1;
        filter: alpha(opacity=30);
    }
    </style>
    <script type="text/javascript">
    var zIndex = 1;
    window.onload = function() {
        var oDrag1 = document.getElementById("drag1");
        var oDrag2 = document.getElementById("drag2");
        drag(oDrag1);
        drag(oDrag2);
    };

    function drag(oDrag) {
        var disX = dixY = 0;
        oDrag.onmousedown = function(event) {
            //浏览器兼容
            var event = event || window.event;
            //鼠标指针位置-对象偏移位置120px不拖定;
            disX = event.clientX - this.offsetLeft;
            disY = event.clientY - this.offsetTop;

            var oTemp = document.createElement("div");
            oTemp["id"] = "temp";
            //getComputedStyle是一个可以获取（只读）当前元素所有最终使用的CSS属性值。其中俩个参数：元素，伪类。
            //和style的区别是 style只能获取属性style的值并不能获取.css里的属性，且还可以设置。
            oTemp.style.left = this.currentStyle ? this.currentStyle["left"] : getComputedStyle(this, null)["left"];
            oTemp.style.top = this.currentStyle ? this.currentStyle["top"] : getComputedStyle(this, null)["top"];
            oTemp.style.zIndex = zIndex++;
            document.body.appendChild(oTemp);

            document.onmousemove = function(event) {
                var event = event || window.event;
                var iL = event.clientX - disX;
                var iT = event.clientY - disY;
                //offsetWidth对象的宽度包括 margin padding  border;
                var maxL = document.documentElement.clientWidth - oDrag.offsetWidth;//当拖的距离大于屏幕时 等于最大值
                var maxT = document.documentElement.clientHeight - oDrag.offsetHeight

                iL <= 0 && (iL = 0);当小于零是=0
                iT <= 0 && (iT = 0);
                iL >= maxL && (iL = maxL);当值大于屏幕时 =最大值
                iT >= maxT && (iT = maxT);

                oTemp.style.left = iL + "px";
                oTemp.style.top = iT + "px";
                return false;
            };

            document.onmouseup = function() {
                document.onmousemove = null;
                document.onmouseup = null;
                oDrag.style.left = oTemp.style.left;
                oDrag.style.top = oTemp.style.top;
                oDrag.style.zIndex = oTemp.style.zIndex;
                document.body.removeChild(oTemp);
                oDrag.releaseCapture && oDrag.releaseCapture()
            };

            this.setCapture && this.setCapture();
            return false
        }
    }
    </script>
</head>

<body>
    <div id="drag1"></div>
    <!-- <div id="drag2"></div> -->
</body>

</html>

1、getComputedStyle：是一个可以获取当前元素所有最终使用的CSS属性值; ~~~~

2、是如何理解var e=e||window.event的？相信很多人都能给我个回答说是：为了实现多种浏览器兼容。

3、js中运算符的优先级

4、clientX、pageX、scrollLeft、offsetLeft、clientWidth、screen.width的用法和区别

5、offsetwidth/clientwidth的区别

6、关于页面中拖动事件中 setCapture 和 releaseCapture 的使用(Js中)

比如说页面上的一个块，你想拖动它，一般就会给它上onmousedown和onmouseup事件，

当然，onmousedown为触发, onmouseup为事件结束，可是实际中你如果这样给块增加事件，

你就会发现这时候,onmouseup事件不感应，情况是这样的,你拉动太快了，鼠标这时可能没在

块上了,怎么办呢，我们做页面不能做概率事件吧，这时候setCapture方法就开始派上用场了.

onmouse事件的原主人为html，setCapture的作用就是让块临时为onmouse事件的主人,使用为

var obj=document.getElementByIdx_xx_x_x(‘块ID’);

obj.setCapture();

这时你给它上的鼠标事件就会统统让块管理了,onmouseup结束事件就100%感应了,

当然，东西只是临时借用的，用完就得归还,所以有onmouseup事件里得使用releaseCapture 方法

来释放权限,也就是

obj.releaseCapture();

希望大家可以用得上它们哥俩：setCapture和releaseCapture

这个不兼容非IE浏览器,还要相应的加上window.captureEvents和window.releaseEvents.

转载于:https://my.oschina.net/u/3427060/blog/1489306

churanlu1875

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
模块拖动鼠标位置，对象位置（实录五）

拖拽--Clone http://www.fgm.cc/learn/lesson8/02.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1...
复制链接

扫一扫