本內(nèi)容不涉及css樣式部分，自行根據(jù)實際業(yè)務(wù)場景進行構(gòu)建。這里只是實現(xiàn)拖拽功能的外層函數(shù)，涉及到業(yè)務(wù)邏輯處理，請自行在函數(shù)內(nèi)容實現(xiàn)。

PC端鼠標(biāo)拖拽

var dragBtn=$(".dragBtn");//滑塊jquery對象
dragBtn[0].addEventListener('mousedown', function(event) {
    var pointX = event.pageX; //鼠標(biāo)按下時的坐標(biāo)x,距瀏覽器
    function fnMove(event){//鼠標(biāo)移動時執(zhí)行的函數(shù)（業(yè)務(wù)邏輯在此處理）
        var pointX1 = event.pageX; //鼠標(biāo)移動最后的坐標(biāo)x,距瀏覽器
        //業(yè)務(wù)邏輯處理
    }
    function fnEnd(){//鼠標(biāo)抬起時執(zhí)行的函數(shù)
    document.removeEventListener('mousemove', fnMove, false);//取消鼠標(biāo)移動事件監(jiān)聽
    document.removeEventListener('mouseup', fnEnd, false);//取消鼠標(biāo)抬起事件監(jiān)聽
    }
    document.addEventListener('mousemove', fnMove, false);//監(jiān)聽鼠標(biāo)移動事件（注意:是在鼠標(biāo)點擊滑塊事件后注冊）
    document.addEventListener('mouseup', fnEnd, false);//監(jiān)聽鼠標(biāo)抬起事件（注意:是在鼠標(biāo)點擊滑塊事件后注冊）
},false);

移動端手指拖拽

var dragBtn=$(".dragBtn");//滑塊jquery對象
dragBtn[0].addEventListener('touchstart', function(event) {
    var pointX = event.targetTouches[0].pageX; //手指按下時的坐標(biāo)x,距瀏覽器
    function fnMove(event){//手指移動時執(zhí)行的函數(shù)（業(yè)務(wù)邏輯在此處理）
        var pointX1 = event.targetTouches[0].pageX; //手指移動最后的坐標(biāo)x,距瀏覽器
        //業(yè)務(wù)邏輯處理
    }
    function fnEnd(){//手指抬起時執(zhí)行的函數(shù)
    document.removeEventListener('touchmove', fnMove, false);//取消手指移動事件監(jiān)聽
    document.removeEventListener('touchend', fnEnd, false);//取消手指抬起事件監(jiān)聽
    }
    document.addEventListener('touchmove', fnMove, false);//監(jiān)聽手指移動事件（注意:是在手指點擊滑塊事件后注冊）
    document.addEventListener('touchend', fnEnd, false);//監(jiān)聽手指抬起事件（注意:是在手指點擊滑塊事件后注冊）
},false);