公司項(xiàng)目需求，要實(shí)現(xiàn)任務(wù)卡片在不同任務(wù)列表之間進(jìn)行拖拽實(shí)現(xiàn)任務(wù)類別的更改。于是找了一下相關(guān)文章，稍微學(xué)習(xí)了一下。實(shí)現(xiàn)效果如下圖。
拖拽實(shí)現(xiàn)
主要用到的是H5自帶的拖拽效果。其實(shí)項(xiàng)目前端部分是使用React編寫的，也是在使用H5實(shí)現(xiàn)了之后才了解到Dan Abramov大佬有個(gè)React-DnD組件對(duì)原生拖拽方法進(jìn)行了封裝。稍微學(xué)習(xí)了一下，很強(qiáng)。后續(xù)有使用到再寫篇文章進(jìn)行分享。
相關(guān)事件定義與用法
涉及一個(gè)屬性六個(gè)事件。事件均為H5原生事件。
屬性
- draggable：正常div是不允許進(jìn)行拖動(dòng)的。需要添加屬性draggable="true"將元素設(shè)置為可拖動(dòng)。
事件
- ondragstart：拖拽元素事件。在被拖拽時(shí)被調(diào)用。
- ondrag：拖拽元素事件。在元素正在被拖拽時(shí)調(diào)用。
- ondragend：拖拽元素事件。在拖拽元素放置時(shí)調(diào)用。
- ondragenter：放置元素事件。在拖拽元素進(jìn)入到放置元素有效區(qū)域時(shí)調(diào)用。
- ondragover：放置元素事件。在拖拽元素覆蓋放置元素有效區(qū)域時(shí)調(diào)用
- ondragleave：放置元素事件。在拖拽元素離開放置元素有效區(qū)域時(shí)調(diào)用。
- ondrop：放置元素事件。在拖拽元素被放置在放置元素中調(diào)用。
基礎(chǔ)代碼實(shí)現(xiàn)
拖拽元素相關(guān)事件實(shí)現(xiàn)代碼如下。
function handleOndragstart() {
/*
該事件為拖拽元素被拖拽時(shí)調(diào)用。一般用于獲取該拖拽元素的唯一標(biāo)識(shí)，如id等。以方便后續(xù)數(shù)據(jù)更新時(shí)進(jìn)行元素定位
*/
}
function handleOndragend() {
/*
該事件在拖拽元素被放置時(shí)調(diào)用。一般用于重置變量操作
*/
}
function handleOndrag() {
/*
該事件憑個(gè)人需求進(jìn)行功能實(shí)現(xiàn)
*/
}
拖拽元素H5代碼如下
<div
draggable="true"
ondragstart="handleOndragstart()"
ondrag="handleOndarg()"
ondragend="handleOndragend()"
>
該元素為拖拽元素
</div>
放置元素相關(guān)事件實(shí)現(xiàn)代碼如下
/*
默認(rèn)情況下，數(shù)據(jù)/元素不能放置到其他元素中。 如果要實(shí)現(xiàn)該功能，我們需要防止元素的默認(rèn)處理方法。我們可以通過調(diào)用 event.preventDefault() 方法來實(shí)現(xiàn) ondragover 事件。
*/
function handleOndragover(event) {
event.preventDefault();
/*
在這里進(jìn)行你的函數(shù)處理
*/
}
function handleOndragenter(event) {
event.preventDefault();
/*
在這里進(jìn)行你的函數(shù)處理
*/
}
function handleOndragleave(event) {
event.preventDefault();
/*
在這里進(jìn)行你的函數(shù)處理
*/
}
function handleOndrop(event) {
event.preventDefault(); // 清除默認(rèn)事件。drop 事件的默認(rèn)行為是以鏈接形式打開
/*
一般在該事件中，也就是拖拽元素被放下的時(shí)候與后端進(jìn)行交互進(jìn)行數(shù)據(jù)更新
*/
}
放置元素H5代碼如下
<div
ondragenter="handleOndragenter(event)"
ondragover="handleOndragover(event)"
ondragleave="handleOndragleave(event)"
ondrop=“handleOndrop(event)
>
該元素為放置元素
</div>
實(shí)例
以下代碼可實(shí)現(xiàn)在兩個(gè)div之間進(jìn)行子元素的拖拽
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>拖拽實(shí)現(xiàn)</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) {
// 設(shè)置被拖動(dòng)的數(shù)據(jù)，可簡單理解為設(shè)置Box的值為被拖動(dòng)元素的id。此處為"Box"
event.dataTransfer.setData("Box", event.target.id);
}
function handleOndragover(event) {
event.preventDefault();
}
function handleOndrop(event) {
// 拖拽元素被放下時(shí)調(diào)用
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>
最后
暫時(shí)寫這么多吧。以上的實(shí)例也是用H5寫的，并沒有使用React實(shí)現(xiàn)。以后再試著寫個(gè)React版的簡單demo吧。這應(yīng)該也算是我的第一篇分享文章，希望能堅(jiān)持下去。
參考鏈接：
https://www.jb51.net/article/154105.htm
https://www.runoob.com/try/try.php?filename=tryhtml5_draganddrop2
到此這篇關(guān)于Html5原生拖拽相關(guān)事件簡介以及基礎(chǔ)實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Html5原生拖拽內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
