原生js实现拖拽考虑浏览器窗口边界详细版代码+注释

GitChat 发布于2019-08-22 16:28 / 3307人阅读

摘要：关于拖拽元素，在网上有很多例子，但都比较简单，且大多数没有完全考虑浏览器窗口边界。对拖拽代码中的具体解释事件流用于兼容各浏览器方法为了返回一个，外界方便操作的接口。考虑边界情况，在函数内部的注释已十分详细。

关于拖拽元素，在网上有很多例子，但都比较简单，且大多数没有完全考虑浏览器窗口边界。
参考多方资料，自己写了个较完善的封装拖拽的方法。
先贴出代码，复制后运行看下效果，
所有理解在注释中较详细说明。




    
    Document

ps:注意138行，可以试着把(event.clientX-diffx)<0换成dragging.offsetLeft<0看看效果。
对拖拽代码中的具体解释：
①事件流用于兼容各浏览器
②EventTarget方法为了返回一个，外界方便操作的接口。
③ EventTarget函数内部通过switch，给拖拽元素添加onmousedown、onmousemove、onmouseup事件。
④通过将元素设置为position：absolute；再通过top和left属性实现拖拽。
⑤考虑边界情况，在函数内部的注释已十分详细。
⑥最后的dragstart、drag、dragend是元素在拖拽开始到结束时候触发的事件。
⑦返回EventTarget，为了可以给元素拖拽事件添加操作，在 EventTarget中定义这些事件流。

专线服务私有云原生js实现拖拽 js拖拽窗口 js实现数据拖拽原生js实现

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94388.html

JS进阶篇4---原生JS实现对元素的拖拽

摘要：原生实现对元素的拖拽一背景介绍此处为铺垫内容，可跳过随着前端的不断发展，各种各样的前端规范和新知识新技术层出不穷，极大地拓展了开发者的操作空间，也大大地提升了用户体验。原生 JS 实现对 html 元素的拖拽一、背景介绍【此处为铺垫内容，可跳过】随着 Web 前端的不断发展，各种各样的前端规范和新知识、新技术层出不穷，极大地拓展了开发者的操作空间，也大大地提升了用户体验。而随着...

evin2016 2019-08-02 15:24 评论0 收藏0
JS进阶篇4---原生JS实现对元素的拖拽

摘要：原生实现对元素的拖拽一背景介绍此处为铺垫内容，可跳过随着前端的不断发展，各种各样的前端规范和新知识新技术层出不穷，极大地拓展了开发者的操作空间，也大大地提升了用户体验。原生 JS 实现对 html 元素的拖拽一、背景介绍【此处为铺垫内容，可跳过】随着 Web 前端的不断发展，各种各样的前端规范和新知识、新技术层出不穷，极大地拓展了开发者的操作空间，也大大地提升了用户体验。而随着...

phoenixsky 2019-08-23 18:22 评论0 收藏0
【easy-invoices】electron-vue、sqlite3 项目初探

摘要：远程读取会有许多限制，防止引起不必要的安全隐患。比较时可以把点去掉转为数字类型比较脚本执行完毕下载前可以拿到更新日志时间版本号和包大小，下载时可以拿到速度。然后开启该项目的构建。将第一步生成的填至项目环境变量，参数名为。父母都是做出纳相关的工作，希望我能给他们做个简单的进销存，在上班的时候使用。开发一个不需要花钱买服务器，不需要依赖网络（更新除外），单机版的程序，对于前端出身的我来说...

wpw 2019-08-23 12:36 评论0 收藏0
HTML5 入门详解

摘要：定义字符中文注音或字符的解释或发音。表单域我们都知道标签用于为用户输入创建表单。在中表单域添加了两个新的属性规定是否启用表单的自动完成功能，默认。通过属性和表单域的可以将输入表单绑定到表单域中。 showImg(http://ww1.sinaimg.cn/large/007kscFEgy1fxgnw4hajoj31400p0q4d.jpg); 1. 认识HTML5 HTML5并不仅仅...

hqman 2019-08-26 13:25 评论0 收藏0
HTML5 入门详解

摘要：定义字符中文注音或字符的解释或发音。表单域我们都知道标签用于为用户输入创建表单。在中表单域添加了两个新的属性规定是否启用表单的自动完成功能，默认。通过属性和表单域的可以将输入表单绑定到表单域中。 showImg(http://ww1.sinaimg.cn/large/007kscFEgy1fxgnw4hajoj31400p0q4d.jpg); 1. 认识HTML5 HTML5并不仅仅...

silenceboy 2019-08-05 18:09 评论0 收藏0