實現(xiàn)以上效果需要先了解JavaScript的關(guān)于拖拽的api。
HTML5 提供了原生的拖放功能，允許用戶在網(wǎng)頁上通過鼠標或其他指針設(shè)備拖動和放置元素。這組 API 可以應用于各種 HTML 元素。
dragstart事件：
當用戶開始拖動一個元素時觸發(fā)。這個事件通常用于設(shè)置被拖動元素的數(shù)據(jù)。
<div id="dragElement" draggable="true">這是一個可拖動的元素</div>
<script>
const dragElement = document.getElementById('dragElement');
dragElement.addEventListener('dragstart', (e) => {
e.dataTransfer.setData('text/plain', '這是被拖動元素攜帶的數(shù)據(jù)');
});
</script>
drag事件：在元素被拖動的過程中持續(xù)觸發(fā)?？梢杂糜趯崟r更新一些視覺效果等，不過在實際應用中使用相對較少。
dragend：當拖動操作結(jié)束時觸發(fā)，不管是成功放置還是中途取消。例如，可以在這個事件中清理一些在拖動過程中設(shè)置的臨時狀態(tài)。
dragenter：當被拖動的元素進入一個有效的放置目標時觸發(fā)。
dragover：當被拖動的元素在放置目標元素上方移動時觸發(fā)。和dragenter一樣，通常需要調(diào)用e.preventDefault()來允許放置操作。
drop：當被拖動的元素被放置到目標元素上時觸發(fā)。這個事件用于處理放置后的邏輯，例如獲取被拖動元素攜帶的數(shù)據(jù)并進行相應的操作。
dragleave：當被拖動的元素離開一個放置目標時觸發(fā)。例如，可以在這個事件中恢復放置目標元素在被拖動元素進入之前的視覺狀態(tài)。
DataTransfer對象
setData(format, data)：用于設(shè)置被拖動元素攜帶的數(shù)據(jù)。format是數(shù)據(jù)的類型，如text/plain、text/html等，data是具體的數(shù)據(jù)內(nèi)容。
getData(format)：用于獲取被拖動元素攜帶的數(shù)據(jù)。format是在setData中設(shè)置的數(shù)據(jù)類型，通過這個方法可以根據(jù)類型獲取相應的數(shù)據(jù)。
clearData([format])：可以清除存儲的數(shù)據(jù)。如果不傳入format參數(shù)，則清除所有存儲的數(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>
// 實現(xiàn)拖拽左側(cè)的div到右側(cè)的表格中
var items = document.querySelectorAll('.item');
var tds = document.querySelectorAll('td');
var index = 0; // 記錄當前拖拽的元素
// 給左側(cè)的div添加拖拽事件
for (var i = 0; i < items.length; i++) {
// 給每個元素添加索引
items[i].ondragstart = function (e) {
e.dataTransfer.setData('text/plain', e.target.innerHTML);
e.dataTransfer.setData('text/plain', e.target.innerHTML);
}
// 記錄當前拖拽的元素
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++) {
// 這一步是必須的，阻止默認行為 否則ondrop事件不會觸發(fā)
tds[i].ondragover = function (e) {
e.preventDefault();
// 已經(jīng)有一個元素放置到td上了，則不執(zhí)行
if (e.target.innerHTML) {
return;
}
// 給當前td添加一個背景色 移動到td上時顯示
e.target.style.backgroundColor = 'blue';
}
// 當鼠標離開td時，清除背景色
tds[i].ondragleave = function (e) {
// 已經(jīng)有一個元素放置到td上了，則不執(zhí)行
if (e.target.innerHTML) {
return;
}
e.target.style.backgroundColor = '';
}
// ondrop事件可以獲取到最終放置的元素
tds[i].ondrop = function (e) {
e.preventDefault();
// 已經(jīng)有一個元素放置到td上了，則不執(zhí)行
if (e.target.innerHTML) {
return;
}
// 獲取當前拖拽元素的值
var data = e.dataTransfer.getData('text/plain');
// 設(shè)置給當前td的值
e.target.innerHTML = data;
console.log(e.target.innerHTML);
// 獲取當前被拖拽的元素的樣式，然后添加給右側(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
