博客
关于我
JS 拖拽实现
阅读量:479 次
发布时间:2019-03-06

本文共 2452 字,大约阅读时间需要 8 分钟。

拖拽功能在前端开发中是一个常见的需求,常见的实现方式有两个:基于h5拖拽属性的实现和基于鼠标事件的模拟实现。两种方式各有优缺点,可以根据实际需求选择合适的方式。

1、基于h5拖拽属性的实现

函数myDrag(el){         变量disX,disY,left,top;          el.draggable = true;          el.ondragstart = 函数(e){             disX = e.clientX;              disY = e.clientY;              left = parseInt(window.getComputedStyle(el).marginLeft);              top = parseInt(window.getComputedStyle(el).marginTop);          }          el.ondrag = 函数(e){             如果(e.clientX>0 || e.clientY>0){                 l = e.clientX - disX;                  t = e.clientY - disY;                  el.style.marginLeft = left + l + 'px';                  el.style.marginTop = top + t + 'px';              }          }          el.ondragend = 函数(e){         }

2、基于鼠标事件的模拟拖拽

函数myDrag(el){         el.draggable = false;          el.onmousedown = 函数(e){             disX = e.clientX;              disY = e.clientY;              left = parseInt(window.getComputedStyle(el).marginLeft);              top = parseInt(window.getComputedStyle(el).marginTop);              document.onmousemove = 函数(e){                 l = e.clientX - disX;                  t = e.clientY - disY;                  el.style.marginLeft = left + l + 'px';                  el.style.marginTop = top + t + 'px';              };              document.onmouseup = 函数(e){                 document.onmousemove = null;                  document.onmouseup = null;              };          }

在前端框架Vue中,可以通过自定义指令来实现拖拽功能,常见的场景是实现面板的拖拽。例如,在一个面板中,标题部分可以被配置为可拖拽的元素,拖拽时面板会随标题移动。以下是实现步骤:

Vue.directive('drag', {     bind: 函数(el, binding, vnode){         el.draggable = false;          el.onmousedown = 函数(e){             el.parentNode.draggable = false;              disX = e.clientX;              disY = e.clientY;              left = parseInt(window.getComputedStyle(el.parentNode).marginLeft);              top = parseInt(window.getComputedStyle(el.parentNode).marginTop);              document.onmousemove = 函数(e){                 l = e.clientX - disX;                  t = e.clientY - disY;                  el.parentNode.style.marginLeft = left + l + 'px';                  el.parentNode.style.marginTop = top + t + 'px';              };              document.onmouseup = 函数(e){                 document.onmousemove = null;                  document.onmouseup = null;              };          }

...

这一实现方式需确保该面板可以自由地在页面中移动,并且可以通过回调接口(如binding.value(l,t))获取拖拽时的坐标位移信息。需要注意的是,拖拽过程中需要确保事件处理函数能够及时释放,以避免内存泄漏或页面响应速度的下降。

转载地址:http://yqxdz.baihongyu.com/

你可能感兴趣的文章
MySQL、Redis高频面试题汇总
查看>>
MYSQL、SQL Server、Oracle数据库排序空值null问题及其解决办法
查看>>
mysql一个字段为空时使用另一个字段排序
查看>>
MySQL一个表A中多个字段关联了表B的ID,如何关联查询?
查看>>
MYSQL一直显示正在启动
查看>>
MySQL一站到底!华为首发MySQL进阶宝典,基础+优化+源码+架构+实战五飞
查看>>
MySQL万字总结!超详细!
查看>>
Mysql下载以及安装(新手入门,超详细)
查看>>
MySQL不会性能调优?看看这份清华架构师编写的MySQL性能优化手册吧
查看>>
MySQL不同字符集及排序规则详解:业务场景下的最佳选
查看>>
Mysql不同官方版本对比
查看>>
MySQL与Informix数据库中的同义表创建:深入解析与比较
查看>>
mysql与mem_细说 MySQL 之 MEM_ROOT
查看>>
MySQL与Oracle的数据迁移注意事项,另附转换工具链接
查看>>
mysql丢失更新问题
查看>>
MySQL两千万数据优化&迁移
查看>>
MySql中 delimiter 详解
查看>>
MYSQL中 find_in_set() 函数用法详解
查看>>
MySQL中auto_increment有什么作用?(IT枫斗者)
查看>>
MySQL中B+Tree索引原理
查看>>