HTML
<div>
<h1 style="text-align: center">课程表</h1>
<div class="container">
<div class="left" data-drop="move">
<!-- draggable="true"实现可拖拽 -->
<div data-effect="copy" draggable="true" class="color1 item">语文</div>
<div data-effect="copy" draggable="true" class="color2 item">数学</div>
<div data-effect="copy" draggable="true" class="color3 item">英语</div>
<div data-effect="copy" draggable="true" class="color4 item">政治</div>
<div data-effect="copy" draggable="true" class="color5 item">历史</div>
<div data-effect="copy" draggable="true" class="color6 item">地理</div>
<div data-effect="copy" draggable="true" class="color7 item">物理</div>
</div>
<div class="right">
<table>
<tr>
<th>周一</th>
<th>周二</th>
<th>周三</th>
<th>周四</th>
<th>周五</th>
<th>周六</th>
<th>周日</th>
</tr>
<tr>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
</tr>
<tr>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
</tr>
<tr>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
</tr>
<tr>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
</tr>
<tr>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
</tr>
<tr>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
<td data-drop="copy"></td>
</tr>
</table>
</div>
</div>
</div>
CSS文章来源:https://www.toymoban.com/news/detail-724675.html
.color1 {
background-color: pink;
}
.color2 {
background-color: greenyellow;
}
.color3 {
background-color: burlywood;
}
.color4 {
background-color: orangered;
}
.color5 {
background-color: orange;
}
.color6 {
background-color: purple;
}
.color7 {
background-color: peru;
}
.container {
display: flex;
margin: 50px;
}
.left {
background-color: rgba(223, 223, 216, 0.867);
padding: 30px 5px;
}
.item {
width: 60px;
height: 40px;
text-align: center;
line-height: 40px;
border: 1px solid #000;
margin: 5px 0;
}
.right {
margin-left: 50px;
box-sizing: border-box;
background-color: rgba(192, 192, 186, 0.867);
}
table {
border: 1px solid black;
}
th {
width: 60px;
height: 40px;
padding: 10px;
margin: 2px;
line-height: 40px;
border-radius: 2px;
}
td {
width: 60px;
height: 40px;
padding: 10px;
margin: 2px;
border-radius: 2px;
background-color: #fff;
}
.drop-over {
background-color: rgba(192, 192, 186, 0.867);
}
JS文章来源地址https://www.toymoban.com/news/detail-724675.html
// 父级事件委托
const container = document.querySelector('.container')
// // 开始拖拽(只触发一次)
// // e.target拖拽元素
// container.ondragstart = (e) => {
// console.log('start', e.target)
// }
// // 拖拽到了哪个元素上(频繁触发-350ms)
// // e.target拖拽到了哪个元素之上
// container.ondragover = (e) => {
// // console.log('over', e.target)
// }
// // 拖拽到了哪个元素上(拖拽到对应元素只触发一次)
// // e.target拖拽到了哪个元素之上
// container.ondragenter = (e) => {
// console.log('enter', e.target)
// }
// // 松开鼠标时拖拽到哪个元素上
// // e.target拖拽到了哪个元素之上
// container.ondrop = (e) => {
// console.log('drop', e.target)
// }
// // 直接使用无法触发该事件 因为浏览器默认行为不支持拖拽到元素上
// // 因此要阻止默认行为
// container.ondragover = (e) => {
// e.preventDefault()
// }
let source
// 功能实现
container.ondragstart = (e) => {
// 设置拖拽时鼠标状态,取自定义属性
e.dataTransfer.effectAllowed = e.target.dataset.effect
source = e.target
}
container.ondragover = (e) => {
e.preventDefault()
}
function clearDropStyle() {
document.querySelectorAll('.drop-over').forEach((node) => {
node.classList.remove('drop-over')
})
}
// 之前的代码在实现的时候,只考虑了该元素拖拽到空白元素的场景
// 但是拖拽到同级元素,也要找到父元素进行替换,直到找到存在drop
function getDropNode(node) {
while (node && !node.dataset?.drop) {
node = node.parentNode
}
return node
}
container.ondragenter = (e) => {
// 清除之前的样式
clearDropStyle()
const dropNode = getDropNode(e.target)
// 当目标元素的自定义属性drop等于目前拖动元素属性时,代表该节点接受拖拽
if (dropNode && dropNode.dataset.drop === e.dataTransfer.effectAllowed) {
// 当拖拽元素移入时,添加阴影
dropNode.classList.add('drop-over')
}
}
container.ondrop = (e) => {
clearDropStyle()
const dropNode = getDropNode(e.target)
if (dropNode && dropNode.dataset.drop === e.dataTransfer.effectAllowed) {
if (dropNode.dataset.drop === 'copy') {
dropNode.innerHTML = ''
const cloned = source.cloneNode(true)
// 复制过后的节点改为move属性
cloned.dataset.effect = 'move'
dropNode.appendChild(cloned)
} else {
// 拖回去删除该节点
source.remove()
}
}
}
到了这里,关于前端drag api课程表demo的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!