Cómo implementar arrastrar y soltar en JavaScript puro

En este tutorial, veremos cómo implementar el efecto de arrastrar y soltar en JavaScript vanilla. La traducción literal del inglés - "pull and drop" - refleja la esencia del efecto, esto es bien conocido por cualquier usuario que arrastre y suelte elementos de la interfaz.





Es posible que sea necesario arrastrar y soltar en diferentes situaciones, por ejemplo, en las siguientes:





  • Reposicionamiento visual simple de un elemento.





  • Ordene los elementos usando arrastrar y soltar. Un ejemplo es la clasificación de tarjetas de tareas en un rastreador de tareas.





  • Cambiar el contexto de un elemento. Ejemplo: transferir una tarea en un rastreador de tareas de una lista a otra.





  • Mover archivos locales a la ventana del navegador.





Echaremos un vistazo a arrastrar y soltar usando la ordenación como ejemplo. Para hacer esto, crearemos una lista de tareas interactiva.





API HTML de arrastrar y soltar

El  estándar HTML5 tiene una API que permite arrastrar y soltar. Permite, mediante eventos especiales, controlar la captura de un elemento en la página por el mouse y su movimiento a una nueva posición. Echemos un vistazo más de cerca a esta API.





  ,   .  , ,  . , draggable



true



.





<div draggable="true">Draggable element</div>
      
      



,   .  MDN,    .





  • drag



    —  , .





  • dragstart



    —    .





  • dragend



    —   , .





  • dragover



    —  , ,   .





  • drop



    —    , ,     .





  .      . ,   , dragover



drop



        preventDefault



.  —     .   .





  API.   ,     . , DataTransfer



,   , .     ,   DataTransfer



 , , ,     ,   - .    MDN.





     ,  HTML Drag and Drop API.





 

   . .  —  , ul



.





<section class="tasks">
  <h1 class="tasks__title">To do list</h1>

  <ul class="tasks__list">
    <li class="tasks__item">learn HTML</li>
    <li class="tasks__item">learn CSS</li>
    <li class="tasks__item">learn JavaScript</li>
    <li class="tasks__item">learn PHP</li>
    <li class="tasks__item">stay alive</li>
  </ul>
</section>
      
      



:





body {
  font-family: "Tahoma", sans-serif;
  font-size: 18px;
  line-height: 25px;
  color: #164a44;

  background-color: #b2d9d0;
}

.tasks__title {
  margin: 50px 0 20px 0;

  text-align: center;
  text-transform: uppercase;
 }

.tasks__list {
  margin: 0;
  padding: 0;

  list-style: none;
}

.tasks__item {
  transition: background-color 0.5s;
  margin-bottom: 10px;
  padding: 5px;

  text-align: center;
  border: 2px dashed #b2d9d0;
  border-radius: 10px;
  cursor: move;
  background-color: #dff2ef;

  transition: background-color 0.5s;
}

.tasks__item:last-child {
  margin-bottom: 0;
}

.selected {
  opacity: 0.6;
}
      
      



  ,   — move



. ,    move



  , .





  selected



,  





drag & drop

 1.

 JavaScript.   draggable



  true



, .     JavaScript.





const tasksListElement = document.querySelector(`.tasks__list`);
const taskElements = tasksListElement.querySelectorAll(`.tasks__item`);

//        
for (const task of taskElements) {
  task.draggable = true;
}
      
      



,     .  , .





 2.    

dragstart



dragend



  .   selected



,   . .





tasksListElement.addEventListener(`dragstart`, (evt) => {
  evt.target.classList.add(`selected`);
})

tasksListElement.addEventListener(`dragend`, (evt) => {
  evt.target.classList.remove(`selected`);
});
      
      



 3.

     — . ,   dragover



. , ,           . :





  1. .





  2. .selected



      ,   dragover



    .





  3. , dragover



       ,  —     .





  4. , dragover



        . ,    ,    .





  5. , . ,  ,   .





  6.   .





:





tasksListElement.addEventListener(`dragover`, (evt) => {
  //      
  evt.preventDefault();

  //   
  const activeElement = tasksListElement.querySelector(`.selected`);
  //  ,       
  const currentElement = evt.target;
  // ,   :
  // 1.    ,   ,
  // 2.    
  const isMoveable = activeElement !== currentElement &&
    currentElement.classList.contains(`tasks__item`);

  //  ,   
  if (!isMoveable) {
    return;
  }

  //  ,    
  const nextElement = (currentElement === activeElement.nextElementSibling) ?
      currentElement.nextElementSibling :
      currentElement;

  //  activeElement  nextElement
  tasksListElement.insertBefore(activeElement, nextElement);
});
      
      



nextElement



  .      , , .





     — . ,   .      —   ,   .  .     .     , ,     . , nextElement



.





 4.

    ,   dragover



.     ,   . ,   ,     , .   ,  .





getNextElement()



.   , , .     ,  .





, getBoundingClientRect()



.       ,       . y



,   height



,



,   .





const getNextElement = (cursorPosition, currentElement) => {
  //      
  const currentElementCoord = currentElement.getBoundingClientRect();
  //      
  const currentElementCenter = currentElementCoord.y + currentElementCoord.height / 2;

  //     ,   
  //    —  DOM-
  const nextElement = (cursorPosition < currentElementCenter) ?
      currentElement :
      currentElement.nextElementSibling;

  return nextElement;
};
      
      



 . ,    — ,   .      ,  ,  DOM  .   , ,     .





,   ,    -     . ,  ,    .           DOM    dragover



.  ,      DOM.   , .





tasksListElement.addEventListener(`dragover`, (evt) => {
  evt.preventDefault();

  const activeElement = tasksListElement.querySelector(`.selected`);
  const currentElement = evt.target;
  const isMoveable = activeElement !== currentElement &&
    currentElement.classList.contains(`tasks__item`);

  if (!isMoveable) {
    return;
  }

  // evt.clientY —     ,
  //   
  const nextElement = getNextElement(evt.clientY, currentElement);

  // ,     
  if (
    nextElement && 
    activeElement === nextElement.previousElementSibling ||
    activeElement === nextElement
  ) {
    //  ,   ,      DOM
    return;
  }

  tasksListElement.insertBefore(activeElement, nextElement);
});
      
      



, :   ,  DOM  , ,  — !  —   .





  • HTML Drag and Drop API  MDN.  API.





  • Native HTML5 Drag and Drop.   API   .  .





  • How to make a Drag-and-Drop file uploader with vanilla JavaScript.  ,   drag & drop.





  • Drag & drop   . , HTML Drag and Drop API. , , - API .





  • 10 Best Drag And Drop JavaScript Libraries. JavaScript-,   drag & drop.






HTML Academy «React-» — JavaScript React.js . , . — . 95% . 27 .








All Articles