利用js原生实现拖拽功能

要实现拖拽功能首先我们要了解以下知识：

物体运动的基本条件
1. 要移动的物体有绝对定位
2. 运动的原因是不断的给他left值和top值
拖拽时发生的事件
1. 鼠标按下 mousedown
2. 移动鼠标 mousemove
3. 鼠标抬起 mouseup
思路：
1. 事件源添加点击事件
2. 获取相对于事件源的X,Y值e.offsetX/Y
3. 在点击事件中嵌套移动事件，移动事件的事件源为整个文档
4. 获取可视窗口的坐标值
5. 用可视窗口的坐标值-事件源中获取的坐标值，并把值赋给letf和top
6. 添加抬起事件，抬起时清空移动的方法

以下为实现功能的代码

//获取要添加拖拽的对象
    var oDiv = document.querySelector("div");
    //给对象添加按下鼠标事件
    oDiv.onmousedown = function (e) {
        //获取事件源的坐标
        var osX = e.offsetX;
        var osY = e.offsetY;
        //按住时移动
        oDiv.onmousemove = function (e) {
            //获取移动的位置
            var cX= e.clientX;
            var cY= e.clientY;
            //把值赋给div对象的left值和top值
            oDiv.style.left=cX-osX+"px";
            oDiv.style.top = cY-osY+"px";
        }
        oDiv.onmouseup = function(){
            //放开鼠标时清除移动鼠标中的事件
            oDiv.onmousemove="null";
        }

    }

上述代码可以完成拖拽的功能，但是存在一个问题：

如果鼠标移动的速度太快，而运动的物体没跟上的话，会因为鼠标脱离运动的物体，而物体无法跟着鼠标继续运动，解决方案为：

只需要把移动和松开的对象改为整个文档内即可，代码如下：

 //获取要添加拖拽的对象
    var oDiv = document.querySelector("div");
    //给对象添加按下鼠标事件
    oDiv.onmousedown = function (e) {
        //获取事件源的坐标
        var osX = e.offsetX;
        var osY = e.offsetY;
        //按住时移动
        document.onmousemove = function (e) {
            //获取移动的位置
            var cX= e.clientX;
            var cY= e.clientY;
            //把值赋给div对象的left值和top值
            oDiv.style.left=cX-osX+"px";
            oDiv.style.top = cY-osY+"px";
        }
        document.onmouseup = function(){
            //放开鼠标时清除移动鼠标中的事件
            document.onmousemove="null";
        }

    }

希望这篇博客对你有帮助

利用js原生实现拖拽功能

猜你喜欢