如何用JS制作支持移动端拖动的图标按钮？

本文共计188个文字，预计阅读时间需要1分钟。

javascripttouchButton.addEventListener('touchstart', function(e) { e.preventDefault(); disX=e.touches[0].clientX; moveX=disX; L=oDiv.offsetLeft; T=oDiv.offsetTop; starX=e.touches[0].clientX; starY=e.touches[0].clientY;});

touchButton

window.onload = function () { var oDiv = document.getElementById('touch'); var disX, moveX, L, T, starX, starY, starXEnd, starYEnd; oDiv.addEventListener('touchstart', function (e) { //e.preventDefault(); disX = e.touches[0].clientX - this.offsetLeft; disY = e.touches[0].clientY - this.offsetTop; starX = e.touches[0].clientX; starY = e.touches[0].clientY; }); oDiv.addEventListener('touchmove', function (e) { L = e.touches[0].clientX - disX; T = e.touches[0].clientY - disY; starXEnd = e.touches[0].clientX - starX; starYEnd = e.touches[0].clientY - starY; //console.log(L); if (L < 0) { L = 0; } else if (L > document.documentElement.clientWidth - this.offsetWidth) { L = document.documentElement.clientWidth - this.offsetWidth; } if (T < 0) { T = 0; } else if (T > document.documentElement.clientHeight - this.offsetHeight) { T = document.documentElement.clientHeight - this.offsetHeight; } moveX = L + 'px'; moveY = T + 'px'; //console.log(moveX); this.style.left = moveX; this.style.top = moveY; }); window.addEventListener('touchend', function (e) { //alert(parseInt(moveX)) //判断滑动方向 }); }