The H5 native drag method implements a function to handle DOM drag

A function that takes two arguments and can pass a page with two first arguments: the Dom ID to drag, and the second argument: Relative to the Dom ID of the parent node, it can be dynamically set to Window according to reset and calculate the drag distance by listening for the touchStart and touchMove events to obtain the gesture position. And after execution, listen for the TouchEnd event to remove the touchStart and TouchMove listener.

dragDom = (dragNode, parentNode, ... rest) => { let dragNode = document.getElementById(dragNode); if (rest.length == 1) { let parentNode = window.self; let pWidth = parentNode.innerWidth, pHeight = parentNode.innerHeight; } else { let parentNode = document.getElementById(parentNode); let pWidth = parentNode.clientWidth let pHeight = parentNode.clientHeight; } dragNode.addEventListener('touchstart', (event) => {// If (event.touches. Length == 1) {// Disable browser default event.preventDefault(); }; let touch = event.targetTouches[0]; let disX = touch.clientX - dragNode.offsetLeft, disY = touch.clientY - dragNode.offsetTop; let oWidth = dragNode.offsetWidth, oHeight = dragNode.offsetHeight; dragNode.addEventListener('touchmove', (event) => { let touch = event.targetTouches[0]; dragNode.style.left = touch.clientX - disX + 'px'; dragNode.style.top = touch.clientY - disY + 'px'; If (obj.offsetLeft <= 0) {obj.style.left = 0; }; // // right if (obj.offsetLeft >= width-owidth) {obj.style.left = width-owidth + 'px'; }; If (obj.offsetTop <= 0) {this.setState({top: 0})}; // //下 载 if (obj.offsetTop >= height-oheight) {obj.style.top = height-oheight + 'px'; }; }); dragNode.addEventListener('touchend', function (event) { dragNode.removeEventListener('touchmove', () => { }); dragNode.removeEventListener('touchend', () => { }); })}); } at present, the performance of the mobile terminal is good, you can leave a message if you have questions, and answer questions online.Copy the code