實現以上效果需要先了解JavaScript的關于拖拽的api。
HTML5 提供了原生的拖放功能，允許用戶在網頁上通過鼠標或其他指針設備拖動和放置元素。這組 API 可以應用于各種 HTML 元素。
dragstart事件：
當用戶開始拖動一個元素時觸發。這個事件通常用于設置被拖動元素的數據。
<div id="dragElement" draggable="true">這是一個可拖動的元素</div>
<script>
const dragElement = document.getElementById('dragElement');
dragElement.addEventListener('dragstart', (e) => {
e.dataTransfer.setData('text/plain', '這是被拖動元素攜帶的數據');
});
</script>
drag事件：在元素被拖動的過程中持續觸發。可以用于實時更新一些視覺效果等，不過在實際應用中使用相對較少。
dragend：當拖動操作結束時觸發，不管是成功放置還是中途取消。例如，可以在這個事件中清理一些在拖動過程中設置的臨時狀態。
dragenter：當被拖動的元素進入一個有效的放置目標時觸發。
dragover：當被拖動的元素在放置目標元素上方移動時觸發。和dragenter一樣，通常需要調用e.preventDefault()來允許放置操作。
drop：當被拖動的元素被放置到目標元素上時觸發。這個事件用于處理放置后的邏輯，例如獲取被拖動元素攜帶的數據并進行相應的操作。
dragleave：當被拖動的元素離開一個放置目標時觸發。例如，可以在這個事件中恢復放置目標元素在被拖動元素進入之前的視覺狀態。
DataTransfer對象
setData(format, data)：用于設置被拖動元素攜帶的數據。format是數據的類型，如text/plain、text/html等，data是具體的數據內容。
getData(format)：用于獲取被拖動元素攜帶的數據。format是在setData中設置的數據類型，通過這個方法可以根據類型獲取相應的數據。
clearData([format])：可以清除存儲的數據。如果不傳入format參數，則清除所有存儲的數據；如果傳入特定的數據類型參數，則只清除該類型的數據。
關于JavaScript拖拽api介紹：
https://www.runoob.com/jsref/event-ondragstart.html
ok，了解以上內容之后，那么就可以寫出演示效果，下面是全部的源碼：
<!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">數據一</div>
<div draggable="true" class="item">數據二</div>
<div draggable="true" class="item">數據三</div>
<div draggable="true" class="item">數據四</div>
<div draggable="true" class="item">數據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>
// 實現拖拽左側的div到右側的表格中
var items = document.querySelectorAll('.item');
var tds = document.querySelectorAll('td');
var index = 0; // 記錄當前拖拽的元素
// 給左側的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);
}
}
// 給右側的td添加拖拽事件
for (var i = 0; i < tds.length; i++) {
// 這一步是必須的，阻止默認行為 否則ondrop事件不會觸發
tds[i].ondragover = function (e) {
e.preventDefault();
// 已經有一個元素放置到td上了，則不執行
if (e.target.innerHTML) {
return;
}
// 給當前td添加一個背景色 移動到td上時顯示
e.target.style.backgroundColor = 'blue';
}
// 當鼠標離開td時，清除背景色
tds[i].ondragleave = function (e) {
// 已經有一個元素放置到td上了，則不執行
if (e.target.innerHTML) {
return;
}
e.target.style.backgroundColor = '';
}
// ondrop事件可以獲取到最終放置的元素
tds[i].ondrop = function (e) {
e.preventDefault();
// 已經有一個元素放置到td上了，則不執行
if (e.target.innerHTML) {
return;
}
// 獲取當前拖拽元素的值
var data = e.dataTransfer.getData('text/plain');
// 設置給當前td的值
e.target.innerHTML = data;
console.log(e.target.innerHTML);
// 獲取當前被拖拽的元素的樣式，然后添加給右側的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
