vue中实现拖拽功能
自定义的全局指令提示:拖拽指令文章目录自定义的全局指令一、拖拽1.自定义拖拽指令2.页面挂载3.css样式提示:以下是本篇文章正文内容,下面案例可供参考一、拖拽1.自定义拖拽指令代码如下(示例):仅供参考data(){return {params:''}},directives: { // 自定义拖拽指令,先声明这个指令drag(el) { // 可就在里写指令的js代码const oDiv =
·
自定义的全局指令
提示:拖拽指令
提示:以下是本篇文章正文内容,下面案例可供参考
一、拖拽
1.自定义拖拽指令
代码如下(示例):仅供参考
data(){
return {
params:''
}
},
directives: { // 自定义拖拽指令,先声明这个指令
drag(el) { // 可就在里写指令的js代码
const oDiv = el // 当前元素
document.onselectstart = () => {
return false
}
oDiv.onmousedown = e => { // 鼠标按下时的鼠标所在的X,Y坐标
// 鼠标按下,计算当前元素距离可视区的距离
const disX = e.clientX - oDiv.offsetLeft
const disY = e.clientY - oDiv.offsetTop
document.onmousemove = e => {
// 通过事件委托,计算移动的距离
// 因为浏览器里并不能直接取到并且使用clientX、clientY,所以使用事件委托在内部做完赋值
const l = e.clientX - disX
const t = e.clientY - disY
// 计算移动当前元素的位置,并且给该元素样式中的left和top值赋值
oDiv.style.left = l + 'px'
oDiv.style.top = t + 'px'
}
document.onmouseup = e => { // 鼠标抬起,清空之前所在的位置,新拖拽的位置已生成并赋值
document.onmousemove = null
document.onmouseup = null
}
// return false不加的话可能导致黏连,拖到一个地方时div粘在鼠标上不下来,相当于onmouseup失效
return false
}
}
},
2.页面挂载
代码如下(示例):案列仅供参考
<el-popover
id="customer"
v-model="isShow"
v-drag // 直接挂在指令即可
placement="left"
trigger="manual"
>
3.css样式
#kefu {
//若用relative定位,该定位不脱离文档流,达不到初始化的样式效果
//若用absolute定位,该定位相对于页面定位,虽然能实现拖动效果,但页面存在滚条时,会随着
//滚动而改变top值;若没有滚动条,拖到边缘时超出部分也将出现滚动条显示。
position: fixed;
right: 10px;
bottom: 10px;
z-index: 999;
width: 60px;
height: 60px;
}
注:一定要用fixed定位,而不是使用relative、absolute定位。
更多推荐
已为社区贡献1条内容
所有评论(0)