Directorio de artículos
prefacio
Drag and drop api es una api muy común en nuestro front-end.Arrastrar
y soltar (Drag and Drop) es una característica muy común. Es cuando agarras algo y lo arrastras a una ubicación diferente.
Este artículo utiliza principalmente un caso para ayudar a todos a entender cómo usarlo.
1. Arrastra y suelta eventos relacionados
1. ondragstart
Disparado una vez cuando comienza el arrastre
2. ondragover
Se activa cuando se arrastra sobre un elemento determinado, siempre se activará
3.portador
Activado al arrastrar sobre ciertos elementos, solo se activará una vez
4.ondrop
Activado cuando el arrastre ha terminado
2. Caso curricular
1. Preparación de la página
Lo primero es preparar nuestra página.
2. Darse cuenta de la capacidad de arrastre de los elementos
Solo necesita escribir draggable="true" en el elemento que debe arrastrarse, y el elemento se encuentra en un estado arrastrable.
<li draggable="true" class="colorRed item">前端开发</li>
<li draggable="true" class="colorBlue item">思想道德</li>
<li draggable="true" class="ColorGreen item">软件工程</li>
3. Realización de funciones
1. Bloquea el evento predeterminado
En este momento, descubrimos que cuando nos movíamos a elementos como div, table y td, el navegador nos bloqueaba de forma predeterminada.
En este momento usamos el método preventDefault() para evitar el evento predeterminado
// 拖拽事件，当拖拽到莫个元素之上时触发，会一直触发
container.ondragover=(e)=>{
// 由于默认是不能托到表格上面的，阻止默认行为
e.preventDefault()
}
2. Agregue un evento y modifique el estado del mouse para copiar
Aquí podemos usar eventos personalizados para marcar el elemento como arrastrable
// 拖拽事件，当拖拽开始时触发一次
container.ondragstart=(e)=>{
// 修改状态鼠标状态为复制
e.dataTransfer.effectAllowed = e.target.dataset.state
}
3. Darse cuenta de arrastrar a un cambio de color de fondo de elemento
Agregue un atributo personalizado a cada elemento td, para que se pueda distinguir de si se puede arrastrar al elemento.
// 拖拽到某个元素上清除前面所以加的元素
function clearOverList(){
document.querySelectorAll(".over").forEach((node)=>{
node.classList.remove('over')
})
}
// 获得最外层元素节点
function getNode(node){
while(node){
if(node.dataset.drop){
return node
}
//获得父节点
node = node.parentNode
}
}
// 拖拽事件，当拖拽到莫个元素之上时触发，只会触发一次
container.ondragenter=(e)=>{
clearOverList()
const dropNode = getNode(e.target)
// 判断是否能够变色
if( dropNode && dropNode.dataset.drop === e.dataTransfer.effectAllowed){
e.target.classList.add('over')
}
}
4. Realizar la función final
// 拖拽事件，当结束拖拽的时候会触发一个元素
container.ondrop = (e)=>{
//清除样式
clearOverList()
const dropNode = getNode(e.target)
if( dropNode && dropNode.dataset.drop === e.dataTransfer.effectAllowed){
if(dropNode.dataset.drop === 'copy'){
dropNode.innerHTML = ''
console.log(souce)
// 深度复制
const cloned = souce.cloneNode(true)
dropNode.appendChild(cloned)
}
}
}
3. Todos los códigos
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>课程表</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#head {
font-size: 26px;
background-color: #5645bf;
color: white;
}
.headerDate {
background-color: #dcdcdc;
}
.colorYellow {
background-color: yellow;
}
.colorBlue {
background-color: #7ac5cd;
}
.colorRed {
background-color: #cd5c5c;
}
.ColorGreen {
background-color: #66cdaa;
}
.tongshi {
background-color: #a15dd0;
}
table {
border: 1px solid;
}
.box{
margin: 20px auto;
}
.contLis{
width: 100px;
height: 680px;
background-color: #dcdcdc;
margin: 20px auto;
}
.item{
width: 80px;
text-align: center;
line-height: 50px;
height: 50px;
list-style: none;
margin: 10px auto;
}
table td{
width: 80px;
}
.container{
display: flex;
}
.over{
background-color: #bebebe;
}
</style>
</head>
<body>
<div class="container">
<div class="contLis" data-drop="more">
<ul>
<li data-state="copy" draggable="true" class="colorRed item">前端开发</li>
<li data-state="copy" draggable="true" class="colorBlue item">思想道德</li>
<li data-state="copy" draggable="true" class="ColorGreen item">软件工程</li>
</ul>
</div>
<table class="box" width="400px" height="680px">
<thead>
<tr class="headerDate">
<th>10月</th>
<th><div class="item">周一</div></th>
<th><div class="item">周二</div></th>
<th><div class="item">周三</div></th>
<th><div class="item">周四</div></th>
<th><div class="item">周五</div></th>
<th><div class="item">周六</div></th>
<th><div class="item">周七</div></th>
</tr>
</thead>
<tbody>
<tr>
<th class="colorYellow">1</th>
<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>
<th class="colorYellow">2</th>
<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>
<th class="colorYellow">3</th>
<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>
<th class="colorYellow">4</th>
<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>
<th class="colorYellow">5</th>
<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>
<th class="colorYellow">6</th>
<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>
<th class="colorYellow">7</th>
<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>
<th class="colorYellow">8</th>
<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>
</tbody>
</table>
</div>
<script>
// 清除函数
function clearOverList(){
document.querySelectorAll(".over").forEach((node)=>{
node.classList.remove('over')
})
}
// 获得node节点
function getNode(node){
while(node){
if(node.dataset.drop){
return node
}
node = node.parentNode
}
}
let souce = null;
const container = document.querySelector('.container')
// 拖拽事件，当拖拽开始时触发一次
container.ondragstart=(e)=>{
// 修改状态鼠标状态为复制
e.dataTransfer.effectAllowed = e.target.dataset.state
souce = e.target
console.log(souce)
}
// 拖拽事件，当拖拽到莫个元素之上时触发，会一直触发
container.ondragover=(e)=>{
// 由于默认是不能托到表格上面的阻止默认行为
e.preventDefault()
// console.log(e.target)
}
// 拖拽事件，当拖拽到莫个元素之上时触发，只会触发一次
container.ondragenter=(e)=>{
clearOverList()
const dropNode = getNode(e.target)
// 判断是否能够变色
if( dropNode && dropNode.dataset.drop === e.dataTransfer.effectAllowed){
e.target.classList.add('over')
}
}
// 拖拽事件，当结束拖拽的时候会触发一个元素
container.ondrop = (e)=>{
clearOverList()
const dropNode = getNode(e.target)
if( dropNode && dropNode.dataset.drop === e.dataTransfer.effectAllowed){
if(dropNode.dataset.drop === 'copy'){
dropNode.innerHTML = ''
console.log(souce)
// 深度复制
const cloned = souce.cloneNode(true)
dropNode.appendChild(cloned)
}
}
}
</script>
</body>
</html>
Resumir
Lo anterior es de lo que quiero hablar hoy. Este artículo solo presenta brevemente el uso de la API de arrastrar y soltar. Hemos dominado los métodos básicos de uso al escribir un caso simple.