实现以上效果需要先了解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
