Neste tutorial, veremos o mecanismo integrado de arrastar e soltar na página.
Para ser justo, deve-se notar que este mecanismo pode ser implementado usando eventos de mouse, como Ilya Kantor mostra em seu livro , mas usaremos ferramentas nativas com base na especificação .
Suporte de tecnologia:

Visualização:

Nossa tarefa é a seguinte: implementar uma lista de tarefas, consistindo em três colunas: todas as tarefas, tarefas em andamento, tarefas concluídas. Obviamente, o aplicativo deve fornecer a capacidade de adicionar e remover tarefas. Além disso, deve ser fornecida a possibilidade de arranjo arbitrário de tarefas. Esta é uma das partes mais interessantes do tutorial - manter o controle do item abaixo do item arrastado e determinar onde o item arrastado deve ser posicionado acima ou abaixo do item rastreado. O bootstrap
será usado para estilização . Se você estiver interessado, por favor me siga.
Markup:
<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>
Aqui temos um container com um campo para inserir o texto de uma tarefa e um botão para adicioná-lo à lista (input-group), bem como três colunas container (list-group) para todas as tarefas (todos-list), tarefas em andamento (em -progress-list) e tarefas concluídas (lista concluída). Quanto aos atributos de "dados", eles se destinam a separar estilo e controle: classes - para estilo, dados - para gerenciamento.
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;
}
As classes "em andamento" e "concluído" servem como indicadores de que a tarefa está na coluna correspondente. A classe “drop” é projetada para visualizar a tarefa atingindo a zona de drop.
Antes de prosseguir para o script, observe que não usaremos todos os eventos de arrastar e soltar, mas a maioria dos principais.
Definimos o container principal em que será realizada a busca por elementos e ao qual será delegado o processamento do evento:
const main = document.querySelector("main");
Implementamos tarefas de adição e exclusão por meio do processamento de um clique:
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();
}
}
});
Vamos direto para arrastar.
Para começar, vamos implementar entrar na zona de "lançamento" e sair dela adicionando / removendo a classe apropriada:
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");
}
});
Em seguida, processamos o início do arrasto:
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);
}
});
Agora precisamos, de alguma forma, controlar o elemento sob aquele que foi arrastado. Isso é necessário para organizar tarefas arbitrariamente na lista, ou seja, trocar tarefas em uma coluna em lugares. Ao lidar com o evento "mousemove", o método "elementFromPoint (x, y)" é usado para isso. A beleza dessa interface é que, para determinar o elemento "subjacente", precisamos apenas manipular o evento "dragover":
// ""
let elemBelow = "";
main.addEventListener("dragover", (e) => {
// ;
//
e.preventDefault();
// ;
//
elemBelow = e.target;
});
Por fim, lidamos com o 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";
}
}
});
Isso é tudo. Como você pode ver, nada complicado. Mas quais são as possibilidades de adicionar interatividade à página. Resta esperar até que os navegadores móveis implementem essa tecnologia, e todos ficarão felizes.
Espero que você tenha encontrado algo interessante para você. Obrigado pela atenção e tenha um bom dia.