Mobile terminal, affirmation is to monitor touchstart, touchmove, let’s look at the effect touchend events

So when you drag, you drag underneath the node, you add underneath the node

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

The preceding div is the object we are dragging, and highlight is used to highlight which one is currently dragging to, for user experience ###1. Initialize the

/ / get all the nodes of the var divList = Array. The from (document. QuerySelectorAll ('div'Var hightLight = document.querySelector('.hightlight'Var lastChild = null var lastChild = null var lastChild = null Var currentChild = null var needAppendParent = null var currentChild = nullfunction init() {
    divList.forEach(item => {
      var bound = item.getBoundingClientRect()
      item.bound = JSON.parse(JSON.stringify(bound))
    })
  }
  init()
Copy the code

Initialization saves the margin value of each dragged object to avoid redrawing each time it is evaluated

1.touchstart

/ * move the fingers up, cloning hit this node, and it is its current position, to move up the position of the finger, which shows the current hightlight hit the * / document in the body. The addEventListener ('touchstart'.function(e) {
    lastChild = e.target
    currentChild = 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;`
  })
Copy the code

When the finger moves up, we write down the current hit node, and clone a node, it sets the absolute position, the position changes according to the finger position, and set the highlight, highlight the current hit node, hightlight position information, width and height, are calculated by the hit node

2.touchmove

/ * let the node has been followed his fingers move, and to judge the current highlight which node, and write down the node * / document in the body. The 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 } }) })Copy the code

When we move, we do two things. First, we make the cloned node follow the finger. Second, we determine whether the upper left corner of the current node is inside a node, that is, whether it is larger than the upper left corner of a node and smaller than the lower right corner of a node

3.touchend

/ * delete manually add style, remove a node, add the clone node to highlight the node, hightlight hidden * / document in the body. The addEventListener ('touchend'.function(e) {
    currentChild.style.cssText = ' '
    needAppendParent.appendChild(currentChild)
    document.body.removeChild(lastChild)
    hightlight.style.cssText = `display:none;`
  })
Copy the code

Touchend, that’s what you do when you release your finger, remove the position style of the current node, and add the cloned node to the highlighted node, remove the cloned node, and hide the highlight box. If we want to implement add after the highlighted node, You can do this using insertAdjacentElement, depending on the code

/ * delete manually add style, remove a node, add the clone node to highlight the node, hightlight hidden * / document in the body. The addEventListener ('touchend'.function(e) {
    currentChild.style.cssText = ' '
    needAppendParent.insertAdjacentElement('afterend', currentChild)
    document.body.removeChild(lastChild)
    hightlight.style.cssText = `display:none;`
  })
Copy the code

The effect