實(shí)現(xiàn)以上效果需要先了解JavaScript的關(guān)于拖拽的api。
HTML5 提供了原生的拖放功能，允許用戶在網(wǎng)頁上通過鼠標(biāo)或其他指針設(shè)備拖動(dòng)和放置元素。這組 API 可以應(yīng)用于各種 HTML 元素。
dragstart事件：
當(dāng)用戶開始拖動(dòng)一個(gè)元素時(shí)觸發(fā)。這個(gè)事件通常用于設(shè)置被拖動(dòng)元素的數(shù)據(jù)。
<div id="dragElement" draggable="true">這是一個(gè)可拖動(dòng)的元素</div>
<script>
const dragElement = document.getElementById('dragElement');
dragElement.addEventListener('dragstart', (e) => {
e.dataTransfer.setData('text/plain', '這是被拖動(dòng)元素?cái)y帶的數(shù)據(jù)');
});
</script>
drag事件：在元素被拖動(dòng)的過程中持續(xù)觸發(fā)。可以用于實(shí)時(shí)更新一些視覺效果等，不過在實(shí)際應(yīng)用中使用相對(duì)較少。
dragend：當(dāng)拖動(dòng)操作結(jié)束時(shí)觸發(fā)，不管是成功放置還是中途取消。例如，可以在這個(gè)事件中清理一些在拖動(dòng)過程中設(shè)置的臨時(shí)狀態(tài)。
dragenter：當(dāng)被拖動(dòng)的元素進(jìn)入一個(gè)有效的放置目標(biāo)時(shí)觸發(fā)。
dragover：當(dāng)被拖動(dòng)的元素在放置目標(biāo)元素上方移動(dòng)時(shí)觸發(fā)。和dragenter一樣，通常需要調(diào)用e.preventDefault()來允許放置操作。
drop：當(dāng)被拖動(dòng)的元素被放置到目標(biāo)元素上時(shí)觸發(fā)。這個(gè)事件用于處理放置后的邏輯，例如獲取被拖動(dòng)元素?cái)y帶的數(shù)據(jù)并進(jìn)行相應(yīng)的操作。
dragleave：當(dāng)被拖動(dòng)的元素離開一個(gè)放置目標(biāo)時(shí)觸發(fā)。例如，可以在這個(gè)事件中恢復(fù)放置目標(biāo)元素在被拖動(dòng)元素進(jìn)入之前的視覺狀態(tài)。
DataTransfer對(duì)象
setData(format, data)：用于設(shè)置被拖動(dòng)元素?cái)y帶的數(shù)據(jù)。format是數(shù)據(jù)的類型，如text/plain、text/html等，data是具體的數(shù)據(jù)內(nèi)容。
getData(format)：用于獲取被拖動(dòng)元素?cái)y帶的數(shù)據(jù)。format是在setData中設(shè)置的數(shù)據(jù)類型，通過這個(gè)方法可以根據(jù)類型獲取相應(yīng)的數(shù)據(jù)。
clearData([format])：可以清除存儲(chǔ)的數(shù)據(jù)。如果不傳入format參數(shù)，則清除所有存儲(chǔ)的數(shù)據(jù)；如果傳入特定的數(shù)據(jù)類型參數(shù)，則只清除該類型的數(shù)據(jù)。
關(guān)于JavaScript拖拽api介紹：
https://www.runoob.com/jsref/event-ondragstart.html
ok，了解以上內(nèi)容之后，那么就可以寫出演示效果，下面是全部的源碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js拖拽</title>
<style>
.content {
display: flex;
width: 50%;
margin: 50px auto;
}
.box1 {
box-sizing: border-box;
}
.item {
width: 150px;
height: 40px;
color: #fff;
background-color: rgb(63, 127, 255);
margin: 0 0 10px 0;
text-align: center;
line-height: 40px;
cursor: pointer;
}
.box2 {
margin-left: 30px;
}
tr {
width: 100%;
}
td {
width: 150px;
height: 40px;
}
</style>
</head>
<body>
<div class="content">
<div class="box1">
<div draggable="true" class="item">數(shù)據(jù)一</div>
<div draggable="true" class="item">數(shù)據(jù)二</div>
<div draggable="true" class="item">數(shù)據(jù)三</div>
<div draggable="true" class="item">數(shù)據(jù)四</div>
<div draggable="true" class="item">數(shù)據(jù)5</div>
</div>
<div class="box2">
<table border="1">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</div>
</body>
<script>
// 實(shí)現(xiàn)拖拽左側(cè)的div到右側(cè)的表格中
var items = document.querySelectorAll('.item');
var tds = document.querySelectorAll('td');
var index = 0; // 記錄當(dāng)前拖拽的元素
// 給左側(cè)的div添加拖拽事件
for (var i = 0; i < items.length; i++) {
// 給每個(gè)元素添加索引
items[i].ondragstart = function (e) {
e.dataTransfer.setData('text/plain', e.target.innerHTML);
e.dataTransfer.setData('text/plain', e.target.innerHTML);
}
// 記錄當(dāng)前拖拽的元素
items[i].ondragend = function (e) {
e.dataTransfer.setData('text/plain', e.target.innerHTML);
e.dataTransfer.setData('text/plain', e.target.innerHTML);
}
}
// 給右側(cè)的td添加拖拽事件
for (var i = 0; i < tds.length; i++) {
// 這一步是必須的，阻止默認(rèn)行為 否則ondrop事件不會(huì)觸發(fā)
tds[i].ondragover = function (e) {
e.preventDefault();
// 已經(jīng)有一個(gè)元素放置到td上了，則不執(zhí)行
if (e.target.innerHTML) {
return;
}
// 給當(dāng)前td添加一個(gè)背景色 移動(dòng)到td上時(shí)顯示
e.target.style.backgroundColor = 'blue';
}
// 當(dāng)鼠標(biāo)離開td時(shí)，清除背景色
tds[i].ondragleave = function (e) {
// 已經(jīng)有一個(gè)元素放置到td上了，則不執(zhí)行
if (e.target.innerHTML) {
return;
}
e.target.style.backgroundColor = '';
}
// ondrop事件可以獲取到最終放置的元素
tds[i].ondrop = function (e) {
e.preventDefault();
// 已經(jīng)有一個(gè)元素放置到td上了，則不執(zhí)行
if (e.target.innerHTML) {
return;
}
// 獲取當(dāng)前拖拽元素的值
var data = e.dataTransfer.getData('text/plain');
// 設(shè)置給當(dāng)前td的值
e.target.innerHTML = data;
console.log(e.target.innerHTML);
// 獲取當(dāng)前被拖拽的元素的樣式，然后添加給右側(cè)的td
var style = window.getComputedStyle(items[index]);
e.target.style.backgroundColor = style.backgroundColor;
e.target.style.color = style.color;
e.target.style.border = style.border;
e.target.style.width = style.width;
e.target.style.height = style.height;
e.target.style.textAlign = style.textAlign;
}
}
</script>
</html>
該文章在 2025/1/2 9:22:19 編輯過
400 186 1886
