En este tutorial, veremos el mecanismo integrado de arrastrar y soltar en la página.
En aras de la justicia, cabe señalar que este mecanismo se puede implementar mediante eventos de ratón, como muestra Ilya Kantor en su libro de texto , sin embargo, usaremos herramientas nativas basadas en la especificación .
Soporte tecnológico:
Vista previa:
Nuestra tarea es la siguiente: implementar una lista de tareas, que consta de tres columnas: todas las tareas, tareas en curso, tareas completadas. Por supuesto, la aplicación debe proporcionar la capacidad de agregar y eliminar tareas. Además, debe proporcionarse la posibilidad de una disposición arbitraria de tareas. Esta es una de las partes más interesantes del tutorial: hacer un seguimiento del elemento debajo del elemento arrastrado y determinar dónde debe colocarse el elemento arrastrado por encima o por debajo del elemento rastreado. Bootstrap
se utilizará para diseñar . Si estás interesado, sígueme.
Margen:
<head>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
crossorigin="anonymous"
/>
<!-- custom CSS -->
<link rel="stylesheet" href="style.css" />
</head>
<body class="container">
<h1>Drag & Drop Example</h1>
<main class="row">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Enter new todo: </span>
</div>
<input
type="text"
class="form-control"
placeholder="todo4"
data-name="todo-input"
/>
<div class="input-group-append">
<button class="btn btn-success" data-name="add-btn">Add</button>
</div>
</div>
<div class="col-4">
<h3>Todos</h3>
<ul class="list-group" data-name="todos-list">
<li class="list-group-item" data-id="1" draggable="true">
<p>todo1</p>
<button
class="btn btn-outline-danger btn-sm"
data-name="remove-btn"
>
X
</button>
</li>
<li class="list-group-item" data-id="2" draggable="true">
<p>todo2</p>
<button
class="btn btn-outline-danger btn-sm"
data-name="remove-btn"
>
X
</button>
</li>
<li class="list-group-item" data-id="3" draggable="true">
<p>todo3</p>
<button
class="btn btn-outline-danger btn-sm"
data-name="remove-btn"
>
X
</button>
</li>
</ul>
</div>
<div class="col-4">
<h3>In Progress</h3>
<ul class="list-group" data-name="in-progress-list"></ul>
</div>
<div class="col-4">
<h3>Completed</h3>
<ul class="list-group" data-name="completed-list"></ul>
</div>
</main>
<!-- custom JS -->
<script src="script.js"></script>
</body>
Aquí tenemos un contenedor con un campo para ingresar el texto de una tarea y un botón para agregarlo a la lista (input-group), así como tres contenedores-columnas (list-group) para todas las tareas (todos-list), tareas en progreso (en -progress-list) y tareas completadas (lista-completada). En cuanto a los atributos de "datos", están destinados a separar el estilo y el control: clases - para el estilo, datos - para la gestión.
Estilos:
body {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #222;
}
main {
max-width: 600px;
}
.input-group {
margin: 1rem;
}
.list-group {
min-height: 100px;
height: 100%;
}
.list-group-item {
display: flex;
justify-content: space-between;
align-items: center;
}
div + div {
border-right: 1px dotted #222;
}
h3 {
text-align: center;
}
p {
margin: 0;
}
.completed p {
text-decoration: line-through;
}
.in-progress p {
border-bottom: 1px dashed #222;
}
.drop {
background: linear-gradient(#eee, transparent);
border-radius: 4px;
}
Las clases "en curso" y "completadas" sirven como indicadores de que la tarea está en la columna correspondiente. La clase "soltar" está diseñada para visualizar la tarea en la zona de lanzamiento.
Antes de pasar al script, tenga en cuenta que no usaremos todos los eventos de arrastrar y soltar, sino la mayoría de los principales.
Definimos el contenedor principal en el que se realizará la búsqueda de elementos y en el que se delegará el procesamiento de eventos:
const main = document.querySelector("main");
Implementamos la adición y eliminación de tareas mediante el procesamiento de un clic:
main.addEventListener("click", (e) => {
//
if (e.target.tagName === "BUTTON") {
// "data-name"
const { name } = e.target.dataset;
//
if (name === "add-btn") {
//
const todoInput = main.querySelector('[data-name="todo-input"]');
//
if (todoInput.value.trim() !== "") {
//
const value = todoInput.value;
//
const template = `
<li class="list-group-item" draggable="true" data-id="${Date.now()}">
<p>${value}</p>
<button class="btn btn-outline-danger btn-sm" data-name="remove-btn">X</button>
</li>
`;
//
const todosList = main.querySelector('[data-name="todos-list"]');
//
todosList.insertAdjacentHTML("beforeend", template);
//
todoInput.value = "";
}
//
} else if (name === "remove-btn") {
//
e.target.parentElement.remove();
}
}
});
Vayamos directamente a arrastrar.
Para empezar, implementemos entrar en la zona de "lanzamiento" y dejarla agregando / eliminando la clase apropiada:
main.addEventListener("dragenter", (e) => {
//
if (e.target.classList.contains("list-group")) {
e.target.classList.add("drop");
}
});
main.addEventListener("dragleave", (e) => {
if (e.target.classList.contains("drop")) {
e.target.classList.remove("drop");
}
});
A continuación, procesamos el inicio del arrastre:
main.addEventListener("dragstart", (e) => {
//
if (e.target.classList.contains("list-group-item")) {
// "dataTransfer" ;
// dataTransfer HTML - text/html,
//
e.dataTransfer.setData("text/plain", e.target.dataset.id);
}
});
Ahora necesitamos de alguna manera hacer un seguimiento del elemento debajo del arrastrado. Esto es necesario para organizar tareas arbitrariamente en la lista, es decir intercambiar tareas en una columna en lugares. Cuando se maneja el evento "mousemove", el método "elementFromPoint (x, y)" se usa para esto. La belleza de esta interfaz es que para determinar el elemento "subyacente", solo necesitamos manejar el evento "dragover":
// ""
let elemBelow = "";
main.addEventListener("dragover", (e) => {
// ;
//
e.preventDefault();
// ;
//
elemBelow = e.target;
});
Finalmente, manejamos el evento "drop":
main.addEventListener("drop", (e) => {
// , dataTransfer
const todo = main.querySelector(
`[data-id="${e.dataTransfer.getData("text/plain")}"]`
);
// , -
if (elemBelow === todo) {
return;
}
// , ,
if (elemBelow.tagName === "P" || elemBelow.tagName === "BUTTON") {
elemBelow = elemBelow.parentElement;
}
// ,
if (elemBelow.classList.contains("list-group-item")) {
// , :
// ;
//
// ( )
//
const center =
elemBelow.getBoundingClientRect().y +
elemBelow.getBoundingClientRect().height / 2;
//
// ,
// ,
if (e.clientY > center) {
if (elemBelow.nextElementSibling !== null) {
elemBelow = elemBelow.nextElementSibling;
} else {
return;
}
}
elemBelow.parentElement.insertBefore(todo, elemBelow);
//
// ,
todo.className = elemBelow.className;
}
//
if (e.target.classList.contains("list-group")) {
//
// ""
e.target.append(todo);
// ""
if (e.target.classList.contains("drop")) {
e.target.classList.remove("drop");
}
// ,
const { name } = e.target.dataset;
if (name === "completed-list") {
if (todo.classList.contains("in-progress")) {
todo.classList.remove("in-progress");
}
todo.classList.add("completed");
} else if (name === "in-progress-list") {
if (todo.classList.contains("completed")) {
todo.classList.remove("completed");
}
todo.classList.add("in-progress");
} else {
todo.className = "list-group-item";
}
}
});
Eso es todo. Como ves, nada complicado. Pero, ¿cuáles son las posibilidades de agregar interactividad a la página? Queda por esperar hasta que los navegadores móviles implementen esta tecnología, y todos estarán felices.
Espero que hayas encontrado algo interesante para ti. Gracias por su atención y que tenga un buen día.