悬浮球全屏拖动是一个常见的需求，本文记录一下实现的代码逻辑以及遇到的问题以及解决的思路
实现代码：
<div class="feedback-container" ref="ballFu" @mousedown="down" @mousemove="move" @mouseup="end">悬浮球</div>
//相关变量
const ballFu = ref()let timer = nulllet flags = false;let comPosition = { x: 0, y: 0,};let nx = "";let ny = "";let dx = "";let dy = "";let xPum = "";let yPum = "";let mouseDown = "";
//鼠标按下function down() { try { flags = true; var touch; if (event.touches) { touch = event.touches[0]; } else { touch = event; } comPosition.x = touch.clientX; comPosition.y = touch.clientY; dx = ballFu.value.offsetLeft; dy = ballFu.value.offsetTop; } catch (error) { console.log(error, "error"); }}
//鼠标移动
function move() { try { if (flags) { var touch; if (event.touches) { touch = event.touches[0]; } else { touch = event; } nx = touch.clientX - comPosition.x; ny = touch.clientY - comPosition.y; xPum = dx + nx; yPum = dy + ny; let width = window.innerWidth - ballFu.value.offsetWidth; //屏幕宽度减去自身控件宽度 let height = window.innerHeight - ballFu.value.offsetHeight; //屏幕高度减去自身控件高度 xPum < 0 && (xPum = 0); yPum < 0 && (yPum = 0); xPum > width && (xPum = width); yPum > height && (yPum = height); ballFu.value.style.left = xPum + "px"; ballFu.value.style.right = "auto"; // ballFu.value.style.right = '30px'; // ballFu.value.style.left = 'auto'; ballFu.value.style.top = yPum + "px"; //阻止页面的滑动默认事件 document.addEventListener( "touchmove", function () { event.preventDefault(); }, false ); } } catch (error) { console.log(error, "error"); }}
//鼠标松开
function end() { flags = false;}
这是最初的实现思路，但是这个写法写出来发现要是鼠标拖动过快的情况下，悬浮球的拖动效果就会失效，看起来就很卡顿，网上搜索一番后，改进了做法，JS相关代码不用删，改动HTML代码并增加一段JS代码后如下：
<div class="feedback-container" ref="ballFu">悬浮球</div>
onMounted(() => { document.addEventListener('click', handleClickOutside); const feedback = document.querySelector('.feedback-container'); feedback.addEventListener('mousedown',function(e){ down() document.onmousemove = function(){ move() } document.onmouseup = function(){ end() } })});
改动之后，悬浮球就可以愉快地拖动而不卡顿了！芜湖~
