2.做一个元素拖拽

时间：2021-07-26 22:33:42 阅读：19 评论：0 收藏：0 [点我收藏+]

普通方式的元素拖拽可以用鼠标按下时间触发元素拖动时移动鼠标抬起时结束

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拖拽</title>
    <link rel="stylesheet" href="1.css">
    <script>
        window.onload = function(){
            var iTarget = document.getElementById("iTarget");
            iTarget.onmousedown = function(){
                toX = event.clientX - iTarget.offsetLeft;
                toY = event.clientY - iTarget.offsetTop;
                document.onmousemove = function(){
                    needX = event.clientX - toX;
                    needY = event.clientY - toY;
                    if(needX > innerWidth - iTarget.offsetWidth)needX = innerWidth - iTarget.offsetWidth;
                    if(needY > innerHeight - iTarget.offsetHeight)needY = innerHeight - iTarget.offsetHeight;
                    if(needX<=0) needX = 0;
                    if(needY<=0) needY = 0;    
                    iTarget.style.left = needX + "px";
                    iTarget.style.top = needY + "px";
                    document.onmouseup = function(){
                        document.onmousemove = null;
                    }
                } 
            }
        }
    </script>
</head>
<body>
    <div id="iTarget">

    </div>
</body>
</html>

也可以用事件委托机制使用

元素给一个drag类有就触发没有就不触发嵌套文档中移动的拖动事件文档中鼠标抬起结束

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素委托拖拽</title>
    <link rel="stylesheet" href="1.css">
    <script>
        window.onload = function(){
            document.documentElement.onmousedown = function(e){
                ev = e || event;
                iTarget = ev.target || ev.scrElement;
                if(iTarget.className == "drag"){
                    toX = ev.clientX - iTarget.offsetLeft;
                    toY = ev.clientY - iTarget.offsetTop;
                    document.onmousemove = function(e){
                        ev = e || event;
                        iTarget = ev.target || ev.scrElement;
                        needX = ev.clientX - toX;
                        needY = ev.clientY - toY;
                        if(needX > innerWidth - iTarget.offsetWidth)needX = innerWidth - iTarget.offsetWidth;
                        if(needY > innerHeight - iTarget.offsetHeight)needY = innerHeight - iTarget.offsetHeight;
                        if(needX<=0) needX = 0;
                        if(needY<=0) needY = 0;
                        iTarget.style.left = needX + "px";
                        iTarget.style.top = needY + "px";
                        document.onmouseup = function(){
                            document.onmousemove = null;
                    }
                    }
                }
            }
        }
    </script>
</head>
<body>
    <div id="iTarget" class="drag"></div>
</body>
</html>

2.做一个元素拖拽

原文：https://www.cnblogs.com/fuyi2345/p/15063042.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)