怎么记录鼠标按下时的坐标，紧接着移动的坐标，最后鼠标弹起的坐标

五绷带好评

30173549

发布于
2017-01-06

javascript

阅读 8.4k

4 个回答

以下代码是我之前写的demo
你是用js还是jQuery？
jQuery的话
可以参照这段代码（这段是zepto 其实跟jQuery一样）：

//设置  手指拖拽进度滑块 的事件
    function moveUp() {
        //开始按下手指事件
        $(".runing_circle").on("touchstart", function (event) {
            move = true;
            event.preventDefault();
            _x = event.touches[0].pageX - parseInt($(".runing_circle").css("left"));
            _y = event.touches[0].pageY;

            console.log(($("#aa").css("left")));
        })
        //移动手指事件
        $(".runing_circle").on("touchmove", function (event) {
            event.preventDefault();
            if (move) {
                x = event.touches[0].pageX - _x;
                $(".runing_circle").css("left", x);
                $(".runing_color").css("width", x);
            }
            console.log(22222);
        })
        //松开手指事件
        $(".runing_circle").on("touchend", function (event) {
            event.preventDefault();
            move = false;
            console.log(33333);
        })
    }

然后js的话参照下面这段代码

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf8">
    <style type="text/css">

    </style>
    <script type="text/javascript">
    window.onload=function(){
        var drag=document.getElementById("drag");
        var flag=0;
        // var currentTop;
        drag.onmousedown=function(e){
           flag=1;
           e=e||window.event;
           
           this.kTop=e.clientY-this.offsetTop;//如果不减去,则鼠标总是在原点
           this.kLeft=e.clientX-this.offsetLeft;
         

        }
        
        drag.onmousemove=function(e){
            if(flag==1){
                e=e||window.event;
                drag.style.top=e.clientY-drag.kTop+"px";
                drag.style.left=e.clientX-drag.kLeft+"px";

            }
            

        
        }
        drag.onmouseup=function(){
            flag=0;

        }
    }
    </script>
</head>
<body bgcolor="gray">
<div style="width:400px;height:300px;background:white;border:2px solid  red;position: absolute;cursor:default;" id="drag">
    

</div>

</body>
</html>

Olime

2846

发布于
2017-01-06

可以参考http://caibaojian.com/jquery/...
楼上js大神的方法也可以

安鸿鹏

151515

发布于
2017-01-06

更新于
2017-01-06

原生JS的话，主要使用 mousedown, mouseup, mousemove 事件来监听鼠标操作，代码如下：

var press = false;

// The mousedown event is fired when a pointing device button (usually a mouse button) is pressed on an element.
document.addEventListener('mousedown', function(e) {
    press = true;
    console.log('--> Event mousedown x: ' + e.clientX + ', y: ' + e.clientY);
});

// The mousemove event is fired when a pointing device (usually a mouse) is moved while over an element.
document.addEventListener('mousemove', function(e) {
    if (!press) return;
    console.log('--> Event mousemove x: ' + e.clientX + ', y: ' + e.clientY);
});

// The mouseup event is fired when a pointing device button (usually a mouse button) is released over an element.
document.addEventListener('mouseup', function(e) {
    press = false;
    console.log('--> Event mouseup x: ' + e.clientX + ', y: ' + e.clientY);
});

API可以参考MDN文档：MouseEvent

以上代码也可以在线看效果: https://jsfiddle.net/RocAn/dn...