架构师_程序员_码农网

 找回密码
 注册[Register]

QQ登录

只需一步,快速开始

查看: 298|回复: 2

[HTML/HTML5] HTML 设置 div 元素任意拖动效果

[复制链接]
发表于 2022-4-26 10:32:01 | 显示全部楼层
需求:HTML 网页有个工具条,可以根据用户的习惯,允许用户随意拖动到想要的位置。

首先效果图如下:

tuodong.gif

HTML 元素通过设置 draggable 属性为 true 可以让该元素任意拖动,但是释放鼠标后元素又会回到原来的位置。

可以通过添加 dragend 事件来完成释放鼠标后,将元素移动到拖动后的位置。

附上源码:

在拖动目标上触发事件 (源元素):

ondragstart - 用户开始拖动元素时触发
ondrag - 元素正在拖动时触发
ondragend - 用户完成元素拖动后触发

释放目标时触发的事件:

ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
ondrop - 在一个拖动过程中,释放鼠标键时触发此事件

参考:

【转】使用 HTML5 拖放 API
https://www.itsvse.com/thread-10299-1-1.html




上一篇:【转】使用 HTML5 拖放 API
下一篇:Angular 组件返回 nbsp 空格
码农网,只发表在实践过程中,遇到的技术难题,不误导他人。
发表于 2022-4-26 21:24:22 | 显示全部楼层
又来学习学习
码农网,只发表在实践过程中,遇到的技术难题,不误导他人。
发表于 2022-4-27 14:13:06 | 显示全部楼层
学习,学习
码农网,只发表在实践过程中,遇到的技术难题,不误导他人。
您需要登录后才可以回帖 登录 | 注册[Register]

本版积分规则

免责声明:
码农网所发布的一切软件、编程资料或者文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。如有侵权请邮件与我们联系处理。

Mail To:help@itsvse.com

QQ|手机版|小黑屋|架构师 ( 鲁ICP备14021824号-2 )|网站地图

GMT+8, 2022-8-12 07:51

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表