做一個像蘋果手機桌面的HOME鍵一樣的圖標，實現圖標按鈕在頁面上可拖拽效果。js代碼如下：

window.onload = function () {var oDiv = document.getElementById('moveIcon');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;}); }

總結

以上是生活随笔為你收集整理的移动端实现图标拖拽效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。