时间:2021-05-08
公司项目需求,要实现任务卡片在不同任务列表之间进行拖拽实现任务类别的更改。于是找了一下相关文章,稍微学习了一下。实现效果如下图。
拖拽实现
主要用到的是H5自带的拖拽效果。其实项目前端部分是使用React编写的,也是在使用H5实现了之后才了解到Dan Abramov大佬有个React-DnD组件对原生拖拽方法进行了封装。稍微学习了一下,很强。后续有使用到再写篇文章进行分享。
相关事件定义与用法
涉及一个属性六个事件。事件均为H5原生事件。
属性
事件
基础代码实现
拖拽元素相关事件实现代码如下。
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吧。这应该也算是我的第一篇分享文章,希望能坚持下去。
参考链接:
https://www.jb51.net/article/154105.htm
https://www.runoob.com/try/try.php?filename=tryhtml5_draganddrop2
到此这篇关于Html5原生拖拽相关事件简介以及基础实现的文章就介绍到这了,更多相关Html5原生拖拽内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
练习HTML5中的拖放API,实现列表拖拽移动!参考文章:JSHTML5拖拽上传图片预览HTML5拖拽移动列表实现思路:1.循环设置每个子项的draggable
本文实例讲述了AngularJS实现图片上传和预览功能的方法。分享给大家供大家参考,具体如下:html5原生方法先看一下html5原生方法上传和预览图片的实现:
拖拽相关属性draggable属性是html5的全局属性,是html5支持拖放操作的方式之一,用来表示元素是否可以被拖放,draggable有三个值,true表
微信的第三方应用发展的如火如荼,借助HTML5技术,能够实现很多原生App应用所具备的功能。很多人认为通过HTML5利用微信公众号可以渐渐地取代原生App应用。
拖拽是一种常见的特性,即抓取对象以后拖到另一个位置。在HTML5中,拖拽是标准的一部分,任何元素都能够拖拽。Html5拖拽非常常见的一个功能,但是大部分拖拽的案