<div
? ? ? class="xuanfu"
? ? ? id="moveDiv"
? ? ? @mousedown="down()"
? ? ? @touchstart="down()"
? ? ? @mousemove.prevent.stop="move()"
? ? ? @touchmove.prevent.stop="move()"
? ? ? @mouseup="end()"
? ? ? @touchend="end()"
? ? >
? ? ? <img class="img-kf" src="../../assets/images/csVip/kf.png" />
</div>

position: { x: 0, y: 0 },
? ? ? nx: "",
? ? ? ny: "",
? ? ? dx: "",
? ? ? dy: "",
? ? ? xPum: "",
? ? ? yPum: "",

//移動端拖拽事件
? ? down() {
? ? ? this.flags = true;
? ? ? let touch;
? ? ? if (event.touches) {
? ? ? ? touch = event.touches[0];
? ? ? } else {
? ? ? ? touch = event;
? ? ? }
? ? ? this.position.x = touch.clientX;
? ? ? this.position.y = touch.clientY;
? ? ? this.dx = moveDiv.offsetLeft;
? ? ? this.dy = moveDiv.offsetTop;
? ? },
? ? move() {
? ? ? if (this.flags) {
? ? ? ? let 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;
? ? ? ? //添加限制：只允許在屏幕內(nèi)拖動

? ? ? ? //屏幕寬度減去懸浮框?qū)捀?
? ? ? ? const maxWidth = document.body.clientWidth - 54;
? ? ? ? const maxHeight = document.body.clientHeight - 54;
? ? ? ? if (this.xPum < 0) {
? ? ? ? ? //屏幕x限制
? ? ? ? ? this.xPum = 0;
? ? ? ? } else if (this.xPum > maxWidth) {
? ? ? ? ? this.xPum = maxWidth;
? ? ? ? }
? ? ? ? if (this.yPum < 0) {
? ? ? ? ? //屏幕y限制
? ? ? ? ? this.yPum = 0;
? ? ? ? } else if (this.yPum > maxHeight) {
? ? ? ? ? this.yPum = maxHeight;
? ? ? ? }
? ? ? ? moveDiv.style.left = this.xPum + "px";
? ? ? ? moveDiv.style.top = this.yPum + "px";
? ? ? ? //阻止頁面的滑動默認事件
? ? ? ? document.addEventListener(
? ? ? ? ? "touchmove",
? ? ? ? ? function () {
? ? ? ? ? ? // 1.2 如果碰到滑動問題，請注意是否獲取到 touchmove
? ? ? ? ? ? // event.preventDefault(); //jq 阻止冒泡事件
? ? ? ? ? ? event.stopPropagation(); // 如果沒有引入jq 就用 stopPropagation()
? ? ? ? ? },
? ? ? ? ? false
? ? ? ? );
? ? ? }
? ? },
? ? //鼠標釋放時候的函數(shù)
? ? end() {
? ? ? this.flags = false;
? ? },

.xuanfu {
? ? width: 1.7rem;
? ? height: 1.7rem;
? ? border-radius: 50%;
? ? // background: rgb(213, 91, 91);
? ? position: fixed;

? ? bottom: 4rem;
? ? right: 0.4rem;
? ? z-index: 9999999999;
? ? text-align: center;

? ? .img-kf {
? ? ? width: 1.7rem;
? ? ? height: 1.7rem;
? ? }
? }