Html5原生拖拽是什么和使用方法
这篇文章主要介绍“Html5原生拖拽是什么和使用方法”，在日常操作中，相信很多人在Html5原生拖拽是什么和使用方法问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Html5原生拖拽是什么和使用方法”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
拖拽实现
主要用到的是H5自带的拖拽效果。其实项目前端部分是使用React编写的，也是在使用H5实现了之后才了解到Dan Abramov大佬有个React-DnD组件对原生拖拽方法进行了封装。稍微学习了一下，很强。后续有使用到再写篇文章进行分享。
相关事件定义与用法
涉及一个属性六个事件。事件均为H5原生事件。
属性
draggable：正常div是不允许进行拖动的。需要添加属性draggable="true"将元素设置为可拖动。
事件
ondragstart：拖拽元素事件。在被拖拽时被调用。
ondrag：拖拽元素事件。在元素正在被拖拽时调用。
ondragend：拖拽元素事件。在拖拽元素放置时调用。
ondragenter：放置元素事件。在拖拽元素进入到放置元素有效区域时调用。
ondragover：放置元素事件。在拖拽元素覆盖放置元素有效区域时调用
ondragleave：放置元素事件。在拖拽元素离开放置元素有效区域时调用。
ondrop：放置元素事件。在拖拽元素被放置在放置元素中调用。
基础代码实现
拖拽元素相关事件实现代码如下。
function handleOndragstart() { }function handleOndragend() { }function handleOndrag() { }拖拽元素H5代码如下
<div draggable="true" ondragstart="handleOndragstart()" ondrag="handleOndarg()" ondragend="handleOndragend()" > 该元素为拖拽元素</div>放置元素相关事件实现代码如下
function handleOndragover(event) { event.preventDefault(); }function handleOndragenter(event) { event.preventDefault(); }function handleOndragleave(event) { event.preventDefault(); }function handleOndrop(event) { event.preventDefault(); // 清除默认事件。drop 事件的默认行为是以链接形式打开 }放置元素H5代码如下
<div ondragenter="handleOndragenter(event)" ondragover="handleOndragover(event)" ondragleave="handleOndragleave(event)" ondrop=“handleOndrop(event) > 该元素为放置元素</div>实例
以下代码可实现在两个div之间进行子元素的拖拽
<!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>最后
暂时写这么多吧。以上的实例也是用H5写的，并没有使用React实现。以后再试着写个React版的简单demo吧。这应该也算是我的第一篇分享文章，希望能坚持下去。
到此，关于“Html5原生拖拽是什么和使用方法”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
