js实现滑块拖拽功能

本内容不涉及css样式部分，自行根据实际业务场景进行构建。这里只是实现拖拽功能的外层函数，涉及到业务逻辑处理，请自行在函数内容实现。

PC端鼠标拖拽

var dragBtn=$(".dragBtn");//滑块jquery对象
dragBtn[0].addEventListener('mousedown', function(event) {
    var pointX = event.pageX; //鼠标按下时的坐标x,距浏览器
    function fnMove(event){//鼠标移动时执行的函数（业务逻辑在此处理）
        var pointX1 = event.pageX; //鼠标移动最后的坐标x,距浏览器
        //业务逻辑处理
    }
    function fnEnd(){//鼠标抬起时执行的函数
    document.removeEventListener('mousemove', fnMove, false);//取消鼠标移动事件监听
    document.removeEventListener('mouseup', fnEnd, false);//取消鼠标抬起事件监听
    }
    document.addEventListener('mousemove', fnMove, false);//监听鼠标移动事件（注意:是在鼠标点击滑块事件后注册）
    document.addEventListener('mouseup', fnEnd, false);//监听鼠标抬起事件（注意:是在鼠标点击滑块事件后注册）
},false);

移动端手指拖拽

var dragBtn=$(".dragBtn");//滑块jquery对象
dragBtn[0].addEventListener('touchstart', function(event) {
    var pointX = event.targetTouches[0].pageX; //手指按下时的坐标x,距浏览器
    function fnMove(event){//手指移动时执行的函数（业务逻辑在此处理）
        var pointX1 = event.targetTouches[0].pageX; //手指移动最后的坐标x,距浏览器
        //业务逻辑处理
    }
    function fnEnd(){//手指抬起时执行的函数
    document.removeEventListener('touchmove', fnMove, false);//取消手指移动事件监听
    document.removeEventListener('touchend', fnEnd, false);//取消手指抬起事件监听
    }
    document.addEventListener('touchmove', fnMove, false);//监听手指移动事件（注意:是在手指点击滑块事件后注册）
    document.addEventListener('touchend', fnEnd, false);//监听手指抬起事件（注意:是在手指点击滑块事件后注册）
},false);