京东6.18大促主会场领京享红包更优惠

 找回密码
 立即注册

QQ登录

只需一步,快速开始

Html5原生拖拽相关事件简介以及基础实现

2024-11-2 22:20| 发布者: db4d5a85| 查看: 74| 评论: 0

摘要: 公司项目需求,要实现使命卡片在差别使命列表之间举行拖拽实现使命种别的更改。于是找了一下相关文章,稍微学习了一下。实现结果如下图。 拖拽实现 重要用到的是H5自带的拖拽结果。实在项如今端部分是使用React编写

公司项目需求,要实现使命卡片在差别使命列表之间举行拖拽实现使命种别的更改。于是找了一下相关文章,稍微学习了一下。实现结果如下图。

拖拽实现

重要用到的是H5自带的拖拽结果。实在项如今端部分是使用React编写的,也是在使用H5实现了之后才相识到Dan Abramov大佬有个React-DnD组件对原生拖拽方法举行了封装。稍微学习了一下,很强。后续有使用到再写篇文章举行分享。

相关事件界说与用法

涉及一个属性六个事件。事件均为H5原生事件。

属性

  • draggable:正常div是不允许举行拖动的。需要添加属性draggable="true"将元素设置为可拖动。
     

事件

  • ondragstart:拖拽元素事件。在被拖拽时被调用。
  • ondrag:拖拽元素事件。在元素正在被拖拽时调用。
  • ondragend:拖拽元素事件。在拖拽元素放置时调用。
  • ondragenter:放置元素事件。在拖拽元素进入到放置元素有用区域时调用。
  • ondragover:放置元素事件。在拖拽元素覆盖放置元素有用区域时调用
  • ondragleave:放置元素事件。在拖拽元素脱离放置元素有用区域时调用。
  • ondrop:放置元素事件。在拖拽元素被放置在放置元素中调用。
     

基础代码实现

拖拽元素相关事件实现代码如下。

[code] function handleOndragstart() { /* 该事件为拖拽元素被拖拽时调用。一般用于获取该拖拽元素的唯一标识,如id等。以方便后续数据更新时举行元素定位 */ } function handleOndragend() { /* 该事件在拖拽元素被放置时调用。一般用于重置变量操作 */ } function handleOndrag() { /* 该事件凭个人需求举行功能实现 */ } [/code]

拖拽元素H5代码如下

[code] <div draggable="true" ondragstart="handleOndragstart()" ondrag="handleOndarg()" ondragend="handleOndragend()" > 该元素为拖拽元素 </div> [/code]

放置元素相关事件实现代码如下

[code] /* 默认环境下,数据/元素不能放置到其他元素中。 如果要实现该功能,我们需要防止元素的默认处理方法。我们可以通过调用 event.preventDefault() 方法来实现 ondragover 事件。 */ function handleOndragover(event) { event.preventDefault(); /* 在这里举行你的函数处理 */ } function handleOndragenter(event) { event.preventDefault(); /* 在这里举行你的函数处理 */ } function handleOndragleave(event) { event.preventDefault(); /* 在这里举行你的函数处理 */ } function handleOndrop(event) { event.preventDefault(); // 扫除默认事件。drop 事件的默认行为是以链接形式打开 /* 一般在该事件中,也就是拖拽元素被放下的时间与后端举行交互举行数据更新 */ } [/code]

放置元素H5代码如下

[code] <div ondragenter="handleOndragenter(event)" ondragover="handleOndragover(event)" ondragleave="handleOndragleave(event)" ondrop=“handleOndrop(event) > 该元素为放置元素 </div> [/code]

实例

以下代码可实如今两个div之间举行子元素的拖拽

[code] <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>拖拽实现</title> <style type="text/css"> .parent { display: flex; width: 450px; justify-content: space-around; } .container { height: 300px; width: 200px; background-color: rgba(255, 255, 0, 0.3); display: flex; flex-direction: column; justify-content: center; align-items: center; } .box { width: 100px; height: 50px; background-color: rgba(255, 255, 255, 1); } </style> <script type="text/javascript"> function handleOndragstart(event) { // 设置被拖动的数据,可简单理解为设置Box的值为被拖动元素的id。此处为"Box" event.dataTransfer.setData("Box", event.target.id); } function handleOndragover(event) { event.preventDefault(); } function handleOndrop(event) { // 拖拽元素被放下时调用 event.preventDefault(); var data = event.dataTransfer.getData("Box"); // 将拖拽元素追加到改放置元素中 event.target.appendChild(document.getElementById(data)); } </script> </head> <body> <div class="parent"> <div class="container" ondragover="handleOndragover(event)" ondrop="handleOndrop(event)" > <div class="box" draggable="true" id="Box" ondragstart="handleOndragstart(event)" ></div> </div> <div class="container" ondragover="handleOndragover(event)" ondrop="handleOndrop(event)" ></div> </div> </body> </html>[/code]

最后

暂时写这么多吧。以上的实例也是用H5写的,并没有使用React实现。以后再试着写个React版的简单demo吧。这应该也算是我的第一篇分享文章,盼望能对峙下去。

参考链接:
https://www.jb51.net/article/154105.htm
https://www.runoob.com/try/try.php?filename=tryhtml5_draganddrop2

到此这篇关于Html5原生拖拽相关事件简介以及基础实现的文章就介绍到这了,更多相关Html5原生拖拽内容请搜索脚本之家以前的文章或继续欣赏下面的相关文章,盼望各人以后多多支持脚本之家!


来源:https://www.jb51.net/html5/752965.html
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
关闭

站长推荐上一条 /6 下一条

QQ|手机版|小黑屋|梦想之都-俊月星空 ( 粤ICP备18056059号 )|网站地图

GMT+8, 2025-7-2 04:43 , Processed in 0.030209 second(s), 19 queries .

Powered by Mxzdjyxk! X3.5

© 2001-2025 Discuz! Team.

返回顶部