Html5原生拖拽相关事件简介以及基础实现html5 拖拽及用 js 实现拖拽功能的示例代码html5拖拽应用记录及注意点HTML5拖拽功能实现的拼图游戏HTML5拖拽API经典实例详解HTML5 拖拽批量上传文件的示例代码html5实现多图片预览上传及点击可拖拽控件详解Html5原生拖拽操作HTML5拖拽的简单实例HTML5 canvas实现移动端上传头像拖拽裁剪效果HTML5如何实现元素拖拽

公司项目需求，要实现任务卡片在不同任务列表之间进行拖拽实现任务类别的更改。于是找了一下相关文章，稍微学习了一下。实现效果如下图。

拖拽实现

主要用到的是H5自带的拖拽效果。其实项目前端部分是使用React编写的，也是在使用H5实现了之后才了解到Dan Abramov大佬有个React-DnD组件对原生拖拽方法进行了封装。稍微学习了一下，很强。后续有使用到再写篇文章进行分享。

相关事件定义与用法

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

属性

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

事件

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

基础代码实现

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

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

拖拽元素H5代码如下

 该元素为拖拽元素 

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

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

放置元素H5代码如下

 该元素为放置元素 

实例

以下代码可实现在两个div之间进行子元素的拖拽

最后

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

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

到此这篇关于Html5原生拖拽相关事件简介以及基础实现的文章就介绍到这了,更多相关Html5原生拖拽内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！