javascript - js写一个页面元素拖动效果，如何判断鼠标在点击后发生了拖动？-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

javascript - js写一个页面元素拖动效果，如何判断鼠标在点击后发生了拖动？

ringa_lee 2017-04-11 09:00:49

[JavaScript讨论组]

387

在拖动目标元素的时候，首先触发了mousedown事件，然后再触发mousemove事件，那么如何判断它触发了呢？是直接

document.onmousemove=function(){
    test=1;//修改状态
}

然后判断test值来触发mousemove事件？可是我总觉得这样子不太优雅，我想问一下有类似经验的大神，你们是如何处理这里的鼠标状态的判断的？

ringa_lee

全部回复(5)

PHP中文网2017-04-11 09:02:49 5楼

<!DOCTYPE html>
<html>
<head lang="en">

<meta charset="UTF-8">  
<title></title>  
<style type="text/css">  
    #xixi {  
        width:200px; height: 200px; position:absolute;  
        left: 50px; top: 50px; background-color: lightcyan;  
    }  
    #haha {  
        position:absolute; left:300px; top:300px;  
        background-color: yellow; width:200px; height: 200px;  
    }  

</style>  
<script type="text/javascript" src="js/mylib.js"></script>  
<script type="text/javascript">  
    window.onload = function() {  
        var obj1 = createDraggableObject();  
        var obj2 = createDraggableObject();  
        obj1.init($('xixi'));  
        obj2.init($('haha'));  
    };  
</script>

</head>
<body>

<p id="xixi">Fuck!</p>  
<p id="haha">Shit!</p>

</body>
</html>

/**

根据id获取页面元素
@param id
@returns {HTMLElement}
*/

function $(id) {

return document.getElementById(id);

}

/**

创建可拖拽对象的工厂方法
*/

function createDraggableObject() {

return {  
    obj: null, left: 0, top: 0,  
    oldX: 0, oldY: 0, isMouseLeftButtonDown: false,  
    init: function (obj) {  
        this.obj = obj;  
        var that = this;  
        this.obj.onmousedown = function (args) {  
            var evt = args || event;  
            this.style.zIndex = 100;  
            that.isMouseLeftButtonDown = true;  
            that.oldX = evt.clientX;  
            that.oldY = evt.clientY;  
            if (this.currentStyle) {  
                that.left = parseInt(this.currentStyle.left);  
                that.top = parseInt(this.currentStyle.top);  
            }  
            else {  
                var pStyle = document.defaultView.getComputedStyle(this, null);  
                that.left = parseInt(pStyle.left);  
                that.top = parseInt(pStyle.top);  
            }  
        };  
        this.obj.onmousemove = function (args) {  
            that.move(args || event);  
        };  
        this.obj.onmouseup = function () {  
            that.isMouseLeftButtonDown = false;  
            this.style.zIndex = 0;  
        };  
    },  
    move: function (evt) {  
        if (this.isMouseLeftButtonDown) {  
            var dx = parseInt(evt.clientX - this.oldX);  
            var dy = parseInt(evt.clientY - this.oldY);  
            this.obj.style.left = (this.left + dx) + 'px';  
            this.obj.style.top = (this.top + dy) + 'px';  
        }  
    }  
};

}

百度的

赞 +0

添加回复

高洛峰2017-04-11 09:02:49 4楼

我记得我大半个月前回答另一个问题的时候还写过一个demo

传送门

然后，点击看demo的代码和效果
http://jsfiddle.net/7ra1tgct/1/

楼上说的ondrag确实不错，值得推荐，但有时如果要考虑兼容性就不行了哦

赞 +0

添加回复

黄舟2017-04-11 09:02:49 3楼

把mousemove 函数mouseup函数写在mousedown里面，这样自由鼠标按下后才能触发nousemove，也能检测鼠标抬起

赞 +0

添加回复

天蓬老师2017-04-11 09:02:49 2楼

onmousedown之后,给body添加mousemove事件，然后根据坐标调整移动的元素,指定元素mouseup之后,删除body的mousemove事件,这是我之前写的时候的思路

赞 +0

添加回复

巴扎黑2017-04-11 09:02:49 1楼

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #drag{
            position: absolute;
            left: 0;
            top: 0;
            width: 100px;
            height: 100px;
            background: #56718A;
            cursor:pointer;
        }
    </style>
</head>
<body>
    <p id="drag"></p>
    <script>
        window.onload=function(){
            var obj=document.getElementById("drag");
            var x=0;
            var y=0;
            var hasMove=0;
            var hasDown=0;
            function setprice(x,y){
                if(x>=50&&y>=50){
                    obj.style.left=(x-50)+"px";
                    obj.style.top=(y-50)+"px";
                }else if(x>=50&&y<50){
                    obj.style.left=(x-50)+"px";
                    obj.style.top=y+"px";
                }else if(x<50&&y>=50){
                    obj.style.left=x+"px";
                    obj.style.top=(y-50)+"px";
                }else{
                    obj.style.left=x+"px";
                    obj.style.top=y+"px";
                }
            }
            function mousedown(){
                hasMove=0;
                hasDown=1;
                x=event.clientX;
                y=event.clientY;
                setprice(x,y);
                document.addEventListener("mousemove",mousemove);
                document.addEventListener("mouseup",mouseup);
            }
            function mousemove(){
                hasMove=1;
                if(hasDown==1){
                    x=event.clientX;
                    y=event.clientY;
                    setprice(x,y);
                    document.addEventListener("mouseup",mouseup);
                }else{
                    document.removeEventListener("mousemove",mousemove);
                }
                
            }
            function mouseup(){
                hasMove=1;
                hasDown=0;
                x=event.clientX;
                y=event.clientY;
                setprice(x,y);
                document.removeEventListener("mousemove",mousemove);
                document.removeEventListener("mouseup",mouseup);
            }
            obj.onmousedown=function(){
                mousedown();
            }
            
        }
    </script>
</body>

</html>

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>