拖拽移动悬浮球

需求拆解

1.元素悬浮于全屏

2.元素可拖拽

3.元素拖拽结束后会吸附贴壁

4.元素单击唤出菜单

5.菜单展开时点击空白处关闭菜单

6.菜单不可拖拽

7.元素拖拽时菜单不打开

8.元素拖拽至接近底部时，若剩余高度不足以展开菜单则自动吸附至底部。

实现思路

如果适配移动端，则需加注touch事件

1.鼠标按下时

1.1.如果此时已打开菜单，则不做响应

1.2.未打开菜单，记录 按下状态为true 记录x y轴坐标

2.按下移动时 动态计算坐标 设置拖拽元素 style 控制位置 ;

2.1.判断拖拽区域 溢出时 归位判断；

2.2.拖拽时 阻止页面滑动

2.3.增加拖拽计数

3.鼠标抬起

3.1.修改 按下状态 为false

3.2.根据元素位置和容器高宽动态计算元素最后应该吸附位置

4.元素点击事件

4.1.拖拽计数与历史计数差小于10则执行点击事件

4.2.反之不执行

实现过程

export default {

name: "homeDragbtn",

props: {

// 通过position来设置初始定位

position: {

type: Object,

default: function() {

return {

top: "32.25rem",

left: "0"

}

}

}

},

data() {

return {

menuOpen:false, // 菜单展开状态

mouseDownState:false, // 鼠标点击状态

iX:0, iY:0,

dX:0, dY:500, // 初始定位

lastMoveIndex:0, // 拖拽计数

curMoveIndex:0, // 历史计数

}

},

methods: {

// 鼠标按下

demo_down(event){

// 如果打开了菜单，则不做响应

if(this.menuOpen){

this.mouseDownState = false;

return

}

console.log("demo_down",event);

/* 此处判断 pc 或 移动端 得到 event 事件 */

var touch;

if (event.touches) {

touch = event.touches[0];

} else {

touch = event;

}

// 鼠标点击 面向页面 的 x坐标 y坐标

let { clientX, clientY } = touch;

// 鼠标x坐标 - 拖拽按钮x坐标 得到鼠标 距离 拖拽按钮 的间距

this.iX = clientX - this.$refs.actionMgr.offsetLeft;

// 鼠标y坐标 - 拖拽按钮y坐标 得到鼠标 距离 拖拽按钮 的间距

this.iY = clientY - this.$refs.actionMgr.offsetTop;

// 设置当前 状态为 鼠标按下

this.mouseDownState = true;

},

// 鼠标拖拽

demo_move(event){

//鼠标按下 切移动中

if (this.mouseDownState) {

console.log("demo_move",event);

/* 此处判断 pc 或 移动端 得到 event 事件 */

var touch;

if (event.touches) {

touch = event.touches[0];

} else {

touch = event;

}

// 鼠标移动时 面向页面 的 x坐标 y坐标

let { clientX, clientY } = touch;

//当前页面全局容器 dom 元素 获取容器 宽高

let {

clientHeight: pageDivY,

clientWidth: pageDivX

} = this.$refs.pageDiv;

/* 鼠标坐标 - 鼠标与拖拽按钮的 间距坐标 得到 拖拽按钮的 左上角 x轴y轴坐标 */

let [x, y] = [clientX - this.iX, clientY - this.iY];

//拖拽按钮 dom 元素 获取 宽高 style 对象

let {

clientHeight: actionMgrY,

clientWidth: actionMgrX,

style: actionMgrStyle

} = this.$refs.actionMgr;

/* 此处判断 拖拽按钮 如果超出 屏幕宽高 或者 小于

设置 屏幕最大 x=全局容器x y=全局容器y 否则 设置 为 x=0 y=0

*/

if (x > pageDivX - actionMgrX) x = pageDivX - actionMgrX;

else if (x < 0) x = 0;

if (y > pageDivY - actionMgrY) y = pageDivY - actionMgrY;

else if (y < 0) y = 0;

this.dX =x;this.dY = y;

// 计算后坐标 设置 按钮位置

actionMgrStyle.left = `${x}px`;

actionMgrStyle.top = `${y}px`;

actionMgrStyle.bottom = "auto";

actionMgrStyle.right = "auto";

// move Index

this.lastMoveIndex++;

// 当按下键滑动时， 阻止屏幕滑动事件

event.preventDefault();

}

},

// 鼠标抬起

demo_up(event){

console.log("demo_up",event);

// 当前页面全局容器 dom 元素 获取容器 宽高

let {

clientHeight: windowHeight,

clientWidth: windowWidth

} = document.documentElement;

console.log('全局容器:',windowWidth,windowHeight);

// 拖拽按钮 dom 元素 获取 宽高 style 对象

let {

clientHeight: actionMgrY,

clientWidth: actionMgrX,

style: actionMgrStyle

} = this.$refs.actionMgr;

console.log('拖拽按钮',actionMgrY,actionMgrX,actionMgrStyle);

// 计算后坐标 设置 按钮位置

if(this.dY>0&&this.dY

if(this.dX<=(windowWidth/2)){ // left 小于等于屏幕一半

actionMgrStyle.left = 0;

actionMgrStyle.right = 'auto';

}else { // left 大于屏幕一半

actionMgrStyle.left = 'auto';

actionMgrStyle.right = 0;

}

if(this.dY>=(windowHeight/2)){ // 宽度大于1/2时，是将top改为auto，调整bottom

actionMgrStyle.top = 'auto';

actionMgrStyle.bottom = (windowHeight - this.dY - 50) + 'px';

}

}else {

if(this.dY===0){ // 在顶部

actionMgrStyle.top = 0;

actionMgrStyle.bottom = 'auto';

}else if(this.dY===(windowHeight-50)){

actionMgrStyle.bottom = 0;

actionMgrStyle.top = 'auto';

}

if(this.dX>=(windowWidth/2)){ // 右侧是将left改为auto，调整right

actionMgrStyle.left = 'auto';

actionMgrStyle.right = (windowWidth - this.dX - 50) + 'px';

}

}

this.mouseDownState = false;

},

// 单击事件

demo_click(){

console.log("demo_click|moveIndex:",this.lastMoveIndex,this.curMoveIndex);

// mouseup 后会激活click事件

// 如果上一次down事件到下一次click事件中经历10次以下move，则视为纯点击事件

if(this.lastMoveIndex-this.curMoveIndex<=10){

// 点击事件

this.menuOpen = !this.menuOpen;

if( this.menuOpen ){

// 打开菜单

}

}

this.curMoveIndex = this.lastMoveIndex

},

// 点击空白关闭菜单

closeOpenModal(){}

}

}

.zlevelTop{

z-index: 9999;

}

.more-tran-animate{

transition:0.5s;

}

.moreModal {

/* 如果碰到滑动问题，1.3 请检查 z-index。z-index需比web大一级*/

z-index: 9999;

position: fixed;

width: 50px;

height: 50px;

border-radius: 50%;

background-color: #337AB7;

line-height: 40px;

text-align: center;

color: #fff;

opacity: 0.6;

}

.moreModal:hover{

opacity: 1;

}

.six-more-modal-btn{

position: fixed;

z-index: 9999;

width: 14rem;

height: 14rem;

border-radius: 5px;

background: #1A1A1A;

color: #fff;

}

.imgMore{

width: 100%;

height: 100%;

display: flex;

justify-content: center;

align-items: center;

position: relative;

}