HTML input 四个角拖动,JS实现滑块拖动事件的思路

touch事件和mouse事件大致一样的，给你个例子吧

Title

*{

margin: 0;

padding: 0;

}

.box{

position: relative;

width: 100px;

background-color: #000;

height: 4px;

margin: 100px;

}

.box span{

position: absolute;

height:10px;

width: 10px;

border-radius: 50%;

margin-top: -3px;

left:0;

background-color: red;

}

0

var obj = document.querySelector("span");

var text = document.querySelector(".text");

obj.addEventListener('touchstart', function(event) {

event.preventDefault();

// 如果这个元素的位置内只有一个手指的话

if (event.targetTouches.length == 1) {

var touch = event.targetTouches[0];

// 把元素放在手指所在的位置

var disX=touch.pageX-obj.offsetLeft;

var disY=touch.pageY-obj.offsetTop;

var box=document.querySelector(".box");

var width= box.clientWidth-obj.offsetWidth;

obj.addEventListener('touchmove',move);

function move(event){

var touch2=event.targetTouches[0];

var l=touch2.pageX-disX;

var t=touch2.pageY-disY;

if(l<0){

l=0;

};

if(l>width){

l=width;

};

if(t<0){

t=0;

};

if(t>0){

t=0;

};

obj.style.left=l+'px';

obj.style.top=t+'px';

text.innerHTML = (l/width).toFixed(1);

};

obj.addEventListener('touchend',chend);

function chend(event){

obj.removeEventListener('touchmove',move);

obj.removeEventListener('touchend',chend);

};

};

}, false);