手機端，肯定是監聽touchstart,touchmove,touchend事件 先來看看效果

當拖拽時，拖拽到哪個節點下面，就把哪個節點添加到這個下面

<div>1111</div><div>2222</div><div>3333</div><div>4444</div><div>5555</div><div class="hightlight"></div>

前面的div，是我們要拖拽的對象，highlight是用來高亮當前拖到了哪個下面，以便于用戶體驗 ###1.初始化

// 獲取所有的節點var divList = Array.from(document.querySelectorAll('div'))// 用來高亮的節點var hightlight = document.querySelector('.hightlight')// 手指一開始命中的那個節點var lastChild = null// 來自于lastChild，在手指離開之前，都是克隆的var currentChild = null// 要添加到的那個父節點var needAppendParent = null// 用來初始化每一個節點的邊距，不要每次去算，觸發回流function init() {divList.forEach(item => {var bound = item.getBoundingClientRect()item.bound = JSON.parse(JSON.stringify(bound))})}init()

初始化，就是把每一個拖拽的對象的邊距值全部保存起來，避免每次去計算導致的重繪

1.touchstart

/*手指移上去時，克隆命中的這個節點，并且這是它當前的位置，為手指移上去的位置，顯示當前的hightlight命中了哪個*/document.body.addEventListener('touchstart', function(e) {lastChild = e.targetcurrentChild = e.target.cloneNode(true)currentChild.style.cssText = `position:absolute;left:${e.targetTouches[0].pageX }px;top:${e.targetTouches[0].pageY}px;`document.body.appendChild(currentChild)hightlight.style.cssText = `display:block;left:${lastChild.bound.left}px;top:${lastChild.bound.top}px;width:${lastChild.bound.width}px;height:${lastChild.bound.height}px;`})

手指移上去時，我們就記下當前命中的這個節點，并且克隆出一個節點來，它設置絕對定位，位置根據手指的位置變動，并且設置高亮顯示，高亮當前命中的這個節點，hightlight的位置信息，寬高，都是有命中的那個節點算出

2.touchmove

/*讓這個節點一直跟著手指動，并且去判斷當前高亮哪個節點,并且記下這個節點*/document.body.addEventListener('touchmove', function(e) {var currentBound = currentChild.getBoundingClientRect()currentChild.style.cssText = `position:absolute;left:${e.targetTouches[0].pageX}px;top:${e.targetTouches[0].pageY}px;`divList.forEach(item => {if (currentBound.left > item.bound.left && currentBound.left < item.bound.right && currentBound.top > item.bound.top && currentBound.top < item.bound.bottom) {hightlight.style.cssText = `display:block;left:${item.bound.left}px;top:${item.bound.top}px;width:${lastChild.bound.width}px;height:${lastChild.bound.height}px;`needAppendParent = item}})})

move時做了兩件事情，第一件是，讓克隆的那個節點跟著手指走，第二件判斷當前節點的左上角，是否在某個節點里面，即是否大于某個節點的左上角，小于某個節點的右下角，如果是，記住當前節點，并且高亮它

3.touchend

/*刪除手動加的樣式，移除上一個節點，把克隆的節點添加到高亮的那個節點里面，hightlight隱藏*/document.body.addEventListener('touchend', function(e) {currentChild.style.cssText = ''needAppendParent.appendChild(currentChild)document.body.removeChild(lastChild)hightlight.style.cssText = `display:none;`})

touchend，即手指放開時，要做的事情，去除當前節點的position樣式，并且把這個克隆的節點加到高亮的那個節點里面去，再移除掉那個被克隆的節點，高亮框隱藏 假如我們要實現添加到高亮的那個節點后面，可以使用insertAdjacentElement來實現，具體看代碼

/*刪除手動加的樣式，移除上一個節點，把克隆的節點添加到高亮的那個節點里面，hightlight隱藏*/document.body.addEventListener('touchend', function(e) {currentChild.style.cssText = ''needAppendParent.insertAdjacentElement('afterend', currentChild)document.body.removeChild(lastChild)hightlight.style.cssText = `display:none;`})

效果

注：本demo僅僅是講解實現一個最簡單的拖拽功能，很多場景沒考慮，勿噴

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的关于怎么在手机端实现一个拖拽的操作的全部內容，希望文章能夠幫你解決所遇到的問題。

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