如何用JavaScript编写移动端可拖动图标（按钮）的代码？

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

javascript// 简化版touchButton(window.onload=function () { var oDiv=document.getElementById('touch'); oDiv.addEventListener('touchstart', function (e) { e.preventDefault(); var touch=e.touches[0]; var disX=touch.clientX; });});

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)) //判断滑动方向 }); }