首页
移动开发
物联网
服务端
编程语言
企业开发
数据库
业界资讯
其他
搜索
js移动和拖拽
其他
2019-07-05 12:31:21
阅读次数: 0
移动
绝对定位法
onmousedown:鼠标按键按下事件。
获取鼠标位置,获取被拖拽元素的位置,记录两者之间的纵横坐标的差值(clientX和offsetX差值)。
onmousemove:模拟拖拽中事件。
鼠标拖动即发生 onmousemove 事件。对容器元素绑定 。将被拖拽元素的 position 改成绝对位置,这个可以通过 left 和 top 改变该元素的位置,从而使得该元素随着鼠标的拖拽而移动。获取鼠标位置,将鼠标 x 坐标( e.clientX )减去第 2 步储存的横坐标差作为被拖动元素的 left 值,将鼠标y 坐标( e.clientY )减去第 2 步储存的纵坐标差作为被拖动元素的 top 值。实现元素跟随鼠标拖动的效果。
onmouseup:模拟拖拽结束事件。
鼠标按键弹起即发生 onmouseup 事件。对容器元素绑定 . 可以回收 onmousemove 和 onmousedown中的 事件和变量,一次拖拽至此结束。
拖拽
设置元素为 draggable
dragstart :当用户开始拖动对象时触发。(拖拽对象)
dragenter : 当鼠标第一次经过目标元素,且有拖动发生时触发。此事件的监听者应指明在这个位置上是否允许 drop ,或者监听者不执行任何操作,那么 drop 默认是不允许的。(放置目标)
dragover :当鼠标经过一个元素时,且有拖动发生时触发 。需要 e.preventDefault() 防止drag失效 (放置目标)
dragleave :当鼠标离开一个元素,且有拖动在发生时触发。(放置目标)
drag :当对象被拖动,每次移动鼠标时触发。(拖拽对象)
drop :在 drag 操作的最后发生 drop 时,在元素上触发此事件。监听者应该负责检索拖动的数据,并插入 drop 的位置。(放置目标)
dragend :在拖动对象时放开鼠标按键时触发。(拖拽对象)
猜你喜欢
转载自
blog.csdn.net/zdhanunity/article/details/94721480
js移动和拖拽
JS拖拽div(移动)
js拖拽移动位置1
js 鼠标拖拽元素移动
鼠标拖拽移动子窗体的JS实现
原生JS实现图片拖拽移动与缩放
js实现鼠标拖拽盒子移动效果
js移动端拖拽事件写法
拖拽删除元素、拖拽排序、拖拽预览图片和拖拽移动元素
ztree实现拖拽移动和复制
js实现移动端触屏实现拖拽功能
JS实现简单移动端鼠标拖拽效果
js实现移动端悬浮图标拖拽
原生js写移动端触屏拖拽
拖拽js
JS 拖拽
js拖拽
js --拖拽
简单实现windows和移动端的自由拖拽
RecyclerView与ItemTouchHelper实现拖拽和侧滑(移动)删除
支持web端和移动端的拖拽排序插件 dragula
DIV缩放以及拖拽(兼容PC和移动端)
拖拽移动RecyclerView
移动端环形拖拽
IOS CollectionView 拖拽移动
移动端拖拽
ItemTouchHelper拖拽、移动
div 拖拽移动
VUE 元素拖拽、移动
可拖拽移动的GridView
今日推荐
开源日报 | Chrome内置Gemini的意义不在于Gemini;中国AI追随之路的五大误区;ECharts创始人“下海”养鱼;谷歌I/O开发者大会什么都有,只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个!
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议,将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta:实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型,还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告:Django 仍然是 74% 开发者的首选
周排行
返回指定时间格式
fopen函数中的mode参数
Java 单例模式探讨
Flex remoteobject工作原理探讨
寻找mplayer的便捷安装方法
30天了解30种技术系列---(26)MySQL自动化运维工具Inception
关于Jboss/Tomcat/Jetty的JNDI定义123
程序减肥,strip,eu-strip 及其符号表
AsyncTask、View.post(Runnable)、ViewTreeObserver三种方式总结frame animation自动启动
Json和Bean的互相转换
每日归档
更多
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)