这篇文章主要介绍在html5中原生拖拽事件和基础实现方法的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

拖拽实现

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

相关事件定义与用法

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

属性

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

事件

ondragstart：拖拽元素事件。在被拖拽时被调用。

ondrag：拖拽元素事件。在元素正在被拖拽时调用。

ondragend：拖拽元素事件。在拖拽元素放置时调用。

ondragenter：放置元素事件。在拖拽元素进入到放置元素有效区域时调用。

ondragover：放置元素事件。在拖拽元素覆盖放置元素有效区域时调用

ondragleave：放置元素事件。在拖拽元素离开放置元素有效区域时调用。

ondrop：放置元素事件。在拖拽元素被放置在放置元素中调用。

基础代码实现

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

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

拖拽元素H5代码如下：

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

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

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

放置元素H5代码如下

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

实例

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

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><title>拖拽实现</title><styletype="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><scripttype="text/javascript">functionhandleOndragstart(event){//设置被拖动的数据，可简单理解为设置Box的值为被拖动元素的id。此处为"Box"event.dataTransfer.setData("Box",event.target.id);}functionhandleOndragover(event){event.preventDefault();}functionhandleOndrop(event){//拖拽元素被放下时调用event.preventDefault();vardata=event.dataTransfer.getData("Box");//将拖拽元素追加到改放置元素中event.target.appendChild(document.getElementById(data));}</script></head><body><divclass="parent"><divclass="container"ondragover="handleOndragover(event)"ondrop="handleOndrop(event)"><divclass="box"draggable="true"id="Box"ondragstart="handleOndragstart(event)"></div></div><divclass="container"ondragover="handleOndragover(event)"ondrop="handleOndrop(event)"></div></div></body></html>

以上是“在html5中原生拖拽事件和基础实现方法的示例分析”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！