当前位置: 首页 > news >正文

直播系统开发,vue拖拽元素指令 - 云豹科技

直播系统开发,vue拖拽元素指令

记录简单实用的vue拖拽元素指令

bVbOWiS

 

drag.js(指令js)

// 绑定事件
function _addEvent(el, eventName, fn){if(document.addEventListener){el.addEventListener(eventName, fn, false);}else if(window.attachEvent){el.attactEvent('on' + eventName, fn);}
};
// 解绑事件
function _offEvent(el, eventName, fn){if(document.removeEventListener){el.removeEventListener(eventName, fn, false);}else if(window.detachEvent){el.detachEvent('on' + eventName, fn);}
};
export default {bind(el, binding, vnode) {if(!binding.value.dragElSelector){console.error('需传递拖拽元素的选择器,参数名:dragElSelector')return;}if(binding.value.useDrag === false){return;}const dialogHeaderEl = el.querySelector(binding.value.dragElSelector);const dragDom = el;// 是否使用边界,如果使用边界则元素不会被拖出窗口const useBoundary = binding.value.useBoundary !== false;const onDrag = binding.value.onDrag;dialogHeaderEl.style.cssText += ';cursor:move;';// 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);const getStyle = (function() {if (window.document.currentStyle) {return (dom, attr) => dom.currentStyle[attr]} else {return (dom, attr) => getComputedStyle(dom, false)[attr]}})()let mouseDownEvent = (e) => {// console.log(e.clientX, e.clientY)// console.log(vnode); // 鼠标按下,计算当前元素距离可视区的距离const disX = e.clientX - dialogHeaderEl.offsetLeftconst disY = e.clientY - dialogHeaderEl.offsetTopconst dragDomWidth = dragDom.offsetWidthconst dragDomHeight = dragDom.offsetHeightconst screenWidth = document.body.clientWidth || window.innerWidthconst screenHeight = document.body.clientHeight || window.innerHeightconst minDragDomLeft = dragDom.offsetLeftconst maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidthconst minDragDomTop = dragDom.offsetTopconst maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomHeight// console.log('minDragDomTop', minDragDomTop, maxDragDomTop)// console.log('screenHeight', screenHeight) // 获取到的值带px 正则匹配替换let styL = getStyle(dragDom, 'left')let styT = getStyle(dragDom, 'top')if (styL.includes('%')) {styL = +document.body.clientWidth * (+styL.replace(/%/g, '') / 100)styT = +document.body.clientHeight * (+styT.replace(/%/g, '') / 100)} else {styL = +styL.replace(/px/g, '')styT = +styT.replace(/px/g, '')}let mouseMoveEvent = (e) => {e.preventDefault();// 通过事件委托,计算移动的距离let left = e.clientX - disXlet top = e.clientY - disYif(useBoundary){// 边界处理if (-(left) > minDragDomLeft) {left = -minDragDomLeft} else if (left > maxDragDomLeft) {left = maxDragDomLeft}// console.log('top maxDragDomTop', top, maxDragDomTop)if (-top > minDragDomTop) {top = -minDragDomTop}else if (top > maxDragDomTop) {top = maxDragDomTop}}// 移动当前元素dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`// 执行 onDrag 事件if(typeof onDrag === 'function'){onDrag();}};_addEvent(document, 'mousemove', mouseMoveEvent);let mouseUpEvent = function () {_offEvent(document, 'mousemove', mouseMoveEvent);_offEvent(document, 'mouseup', mouseUpEvent);}_addEvent(document, 'mouseup', mouseUpEvent);};_addEvent(dialogHeaderEl, 'mousedown', mouseDownEvent);}
}

使用

<div class="simple-drag" v-drag="{dragElSelector: '.simple-drag'}"><div class="simple-drag-header"><h4 class="simple-drag-title">简单拖拽</h4><button type="button" class="close-btn"</button></div>
</div>

以上就是直播系统开发,vue拖拽元素指令, 更多内容欢迎关注之后的文章

http://www.hskmm.com/?act=detail&tid=33497

相关文章:

  • 2025 年托盘厂家最新推荐榜,聚焦企业技术实力与市场口碑深度解析,筛选优质品牌助力企业采购
  • C# Avalonia 16- Animation- FrameBasedAnimation
  • 01.Python自动获取小说工具
  • 2025 年换热器厂家最新推荐榜:聚焦不锈钢、钛、哈氏合金等多材质及列管式等多类型设备,精选优质厂商助力企业采购决策
  • 2025 年最新推荐砂浆厂家排行榜:聚焦多类型砂浆产品,助力采购方精准选优质供应商
  • 2025 年电缆桥架厂家最新推荐榜:涵盖不锈钢 / 铝合金 / 热镀锌等类型,精选高性能企业助力选购
  • h5直播源码,如何实现一个简易播放器? - 云豹科技
  • Docker中授权普通用户使用docker命令以及解决无权限访问/var/run/docker.sock错误
  • C# Avalonia 16- Animation- PathBasedAnimation
  • 2025年危险品运输公司权威推荐榜:安全高效,专业服务值得信赖!
  • 2025 年联轴器厂家最新推荐排行榜:聚焦万向、膜片、齿式等多类型产品,精选行业优质厂家
  • 2025 年换热器厂家最新推荐榜单:涵盖不锈钢钛哈氏合金等材质及列管式螺旋板等类型,为企业采购提供优质选择
  • 2025 年最新推荐!反应釜制造厂家榜单重磅发布,聚焦不锈钢钛合金哈氏合金等多类型设备优质厂商
  • 多模态、世界模型和主动智能丨Convo AIRTE2025
  • 2025年发电机组厂家推荐排行榜,柴油/燃气/船用/静音箱式/移动拖车/集装箱式/上柴/玉柴/潍柴/康明斯/沃尔沃/道依茨/帕金斯/MTU发电机组公司精选
  • 2025 防火隔断厂家最新推荐排行榜:甲级防火玻璃隔断厂家深度剖析,精选优质品牌助力采购决策
  • clickhouse数据库 数据插入 去重和覆盖
  • nacos客户端(接口调用者)如何感知被调用服务下线? (二)
  • 2025 水泥墩源头厂家最新推荐排行榜:光伏 / 交通 / 围挡等多品类优选,实力品牌权威榜单发布
  • 2025年鸡精生产线/高速混合机/WDG农药生产线/鸡粉干燥设备/海鲜精干燥设备厂家推荐排行榜,调味料干燥设备/全自动配料/螺带混合机优质品牌!
  • 2025 年过滤机厂家最新推荐排行榜:胶带式 / 盘式真空 / 脱水 / 带式真空 / 水平带式过滤机企业精选及选购指南
  • nacos客户端(接口调用者)如何感知被调用服务下线?(一)
  • 2025年防水织带/鞋垫/编织包/针织包/飞织包包/松紧带/鞋带/织带/飞织鞋面厂家推荐排行榜,品质与创新的完美结合!
  • 2025年压铸机械手厂家推荐排行榜,铝镁合金压铸周边自动化,压铸岛专业解决方案!
  • 在MySQL中 redolog undolog binlog 写入的场景,顺序
  • 2025年证卡打印机厂家权威推荐榜:含证件/PVC卡/IC卡/ID卡/智能卡,宝瑞迪/BOOD品牌优选!
  • 2025 年压滤机厂家最新推荐榜:隔膜 / 污泥 / 真空 / 板框 / 带式压滤机优质企业精选指南
  • 灵芯派(基于Debian系统)
  • 2025年大连网络营销推广/媒体投放/全案推广/新媒体营销/全媒体推广/代运营公司权威推荐榜
  • 2025年手持光谱仪/光谱分析仪/便携式光谱仪厂家推荐榜单,矿石/元素/合金/金属/贵金属分析仪器首选!