请问vue中手机移动端用户如何通过触屏进行拖放操作?
网友回复
手机端拖动事件是touchstart touchmove touchend,对用pc端的mousedown mousemove mouseup事件,下面实现了一个兼容手机端和pc端的vue拖放代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" /> <style> .xuanfu { height: 4.5rem; width: 4.5rem; z-index: 990; position: fixed; top: 4.2rem; right: 3.2rem; border-radius: 0.8rem; background-color: rgba(0, 0, 0, 0.55); } .yuanqiu { height: 2.7rem; width: 2.7rem; border: 0.3rem solid rgba(140, 136, 136, 0.5); margin: 0.65rem auto; color: #000000; font-size: 1.6rem; line-height: 2.7rem; text-align: center; border-radius: 100%; background-color: #ffffff; } </style> </head> <body> <div id="app"> <div id="customer"> <!-- Suspended HTML --> <div ref="moveDiv" class="xuanfu" id="div2" @mousedown="down" @touchstart="down" @mousemove="move" @touchmove="move" @mouseup="end" @touchend="end"> <div class="yuanqiu"> </div> </div> </div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue.2.2.min.js"></script> <script> new Vue({ el: '#app', data:function() { return { flags: false, position: { x: 0, y: 0 }, nx: '', ny: '', dx: '', dy: '', xPum: '', yPum: '', } }, methods: { // Mobile drag down(){ this.flags = true; var touch ; if(event.touches){ touch = event.touches[0]; }else { touch = event; } this.position.x = touch.clientX; this.position.y = touch.clientY; this.dx = this.$refs.moveDiv.offsetLeft; this.dy = this.$refs.moveDiv.offsetTop; }, move(){ if(this.flags){ var touch ; if(event.touches){ touch = event.touches[0]; }else { touch = event; } this.nx = touch.clientX - this.position.x; this.ny = touch.clientY - this.position.y; this.xPum = this.dx+this.nx; this.yPum = this.dy+this.ny; this.$refs.moveDiv.style.left = this.xPum+"px"; this.$refs.moveDiv.style.top = this.yPum +"px"; //Prevent page from sliding default events document.addEventListener("touchmove",function(){ event.preventDefault(); },false); } }, //Function when mouse is released end(){ this.flags = false; }, } }) </script> </body> </html>