我要评论公司项目需求，要实现任务卡片在不同任务列表之间进行拖拽实现任务类别的更改。于是找了一下相关文章，稍微学习了一下。实现效果如下图。
拖拽实现
主要用到的是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代码如下
<div
draggable="true"
ondragstart="handleondragstart()"
ondrag="handleondarg()"
ondragend="handleondragend()"
>
该元素为拖拽元素
</div>
放置元素相关事件实现代码如下
/*
默认情况下，数据/元素不能放置到其他元素中。 如果要实现该功能，我们需要防止元素的默认处理方法。我们可以通过调用 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
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.runoob.com/try/try.php?filename=tryhtml5_draganddrop2
到此这篇关于html5原生拖拽相关事件简介以及基础实现的文章就介绍到这了,更多相关html5原生拖拽内容请搜索代码网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持代码网！
发表评论