用vue实现H5页面托拽的div(兼容pc与移动端)_h5移动端拖动效果

            }//判断与左边的距离不能超出屏幕可见区域外
            if (top <0) {
                top = 0;
            }
            if (top >document.documentElement.clientHeight - odiv.offsetHeight) { //如果元素移动高度超过屏幕可视高度则为屏幕高度
                top =document.documentElement.clientHeight - odiv.offsetHeight;
            }
            console.log("left======" + left, "top======" + top);

            //移动当前元素
            odiv.style.left = left + "px";
            odiv.style.top = top + "px";
        };
        document.onmouseup = (e) => {
            document.onmousemove = null;
            document.onmouseup = null;
        };
    },
},

};

移动端的拖拽事件有点特殊，点击元素获取可视左边的位置的方法不是**e.clientX**而是**e.changedTouches[0].pageX**  
 按下、拖动、松开事件也改变了，接下来上代码

**TouchEvent**事件  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210518173537123.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pldF9Mb3Zlcg==,size_16,color_FFFFFF,t_70)


综合起来的代码

==========5.20号跟新  
 **上面的版本虽然能实现拖动，但是假如给元素加个比如子元素比如像这样**

用之前的办法取到的e.target是你点到哪个元素就是哪个元素的dom节点，显然这样是不对的，甚至你点击到子元素会使父元素失效。  
 那么就要用jq来获取元素节点  
 修改后的代码