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

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

以下代码是我之前写的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>

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

原生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

监听鼠标事件mousedown,mousemove,mouseup,定义一个全局变量记录是否按下鼠标,mousemove的时候判断一下那个全局变量仔执行函数。

  • 用递归方式怎么实现多层父子关系的元素进行删除?
  • js新手求解这段代码怎么理解?
  • angularjs 绑定数据时 怎么转义html标签
  • ios下取消300ms延迟引发的滚动问题
  • 这里打印的arguments为啥是null?
  • H5页面里写了input type="file" 用于选择上传图片,在PC端正常使用, 但在app里点了没有反应,手机是安卓的
  • JavaScript 如何获取获得了焦点的 Input 框的 id?
  • 求 php 怎么上传视频,菜鸟官方文档表示没看懂….
  • reactjs中PureRenderMixin指的是什么?
  • javascript中是用对象的属性来传参好还是用闭包内的变量来传参好?
  • angularjs的$http请求问题