API Drag'n'Drop: exemplo de uso

Bom dia amigos!



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.



All Articles