做一個(gè)像蘋(píng)果手機(jī)桌面的HOME鍵一樣的圖標(biāo)，實(shí)現(xiàn)圖標(biāo)按鈕在頁(yè)面上可拖拽效果。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;}); }

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。