One place for hosting & domains

      soltar

      Cómo crear elementos de arrastrar y soltar con Vanilla JavaScript y HTML


      Introducción

      Arrastrar y soltar es una interacción de usuario común que se puede encontrar en muchas interfaces de usuario gráficas.

      Existen bibliotecas de JavaScript preexistentes para añadir la función de arrastrar y soltar a su aplicación. Sin embargo, es posible que haya situaciones en las que una biblioteca no esté disponible o que introduzca una dependencia o gasto general que su proyecto no necesita. En estas situaciones, conocer qué API están disponibles para usted en los navegadores web modernos puede ofrecer soluciones alternativas.

      La API Drag and Drop HTML se basa en el modelo de evento del DOM para obtener información sobre lo que se está arrastrando o soltando y actualizar ese elemento en arrastrar o saltar. Con los controladores de eventos de JavaScript, puede convertir cualquier elemento en un elemento que se puede arrastrar o en un elemento que se puede soltar.

      En este tutorial, crearemos un ejemplo de arrastrar y soltar usando la API Drag and Drop HTML con vanilla JavaScript para usar los controladores de eventos.

      Requisitos previos

      Para completar este tutorial, necesitará lo siguiente:

      • Un navegador web moderno compatible con la API Drag and Drop (Chrome 4+, Firefox 3.5+, Safari 3.1+, Edge 18+).

      Paso 1: Crear el proyecto y marcado inicial

      Nuestro proyecto consistirá en un contenedor con dos tipos de elementos secundarios:

      • Elementos secundarios que puede arrastrar
      • Elementos secundarios en los que se pueden soltar elementos

      Primero, abra la ventana de su terminal y cree un nuevo directorio de proyecto:

      • mkdir drag-and-drop-example

      Luego, diríjase a ese directorio:

      Después, cree un archivo index.html en ese directorio:

      Luego, añada código reutilizable para una página web HTML:

      index.html

      <!DOCTYPE html>
      <html>
        <head>
          <title>My Drag-and-Drop Example</title>
          <link rel="stylesheet" href="https://www.digitalocean.com/community/tutorials/style.css" />
        </head>
        <body>
        </body>
      </html>
      

      Y entre las etiquetas <body> añada su elemento draggable y su dropzone (objetivo para soltar):

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
          >
            draggable
          </div>
        </div>
      
        <div
          class="example-dropzone"
        >
          dropzone
        </div>
      </div>
      

      Guarde y cierre el archivo. Después, cree un archivo style.css:

      Luego, añada estilos para los elementos en el archivo index.html:

      style.css

      .example-parent {
        border: 2px solid #DFA612;
        color: black;
        display: flex;
        font-family: sans-serif;
        font-weight: bold;
      }
      
      .example-origin {
        flex-basis: 100%;
        flex-grow: 1;
        padding: 10px;
      }
      
      .example-draggable {
        background-color: #4AAE9B;
        font-weight: normal;
        margin-bottom: 10px;
        margin-top: 10px;
        padding: 10px;
      }
      
      .example-dropzone {
        background-color: #6DB65B;
        flex-basis: 100%;
        flex-grow: 1;
        padding: 10px;
      }
      

      Esto añadirá un formato para la aplicación. Ahora puede ver index.html en el navegador y observar que esto produce un draggable <div> y un dropzone <div>.

      Captura de pantalla de los divs draggable y dropzone

      Luego, realizaremos explícitamente el primer <div> arrastrable añadiendo el atributo draggable:

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
          >
            draggable
          </div>
        </div>
      
        <div
          class="example-dropzone"
        >
          dropzone
        </div>
      </div>
      

      Guarde y cierre el archivo.

      Finalmente, vea index.html en el navegador de nuevo. Si hacemos clic en el draggable <div> y lo arrastramos por la pantalla, debería haber una indicación visual de que se está moviendo.

      El valor predeterminado para el atributo draggable es auto. Eso significa que el comportamiento predeterminado de su navegador determinará si el elemento se puede arrastrar. Generalmente, esto significa que las selecciones, las imágenes y los enlaces se pueden arrastrar sin especificar draggable="true".

      Ahora ya tiene un archivo HTML con un elemento que se puede arrastrar. Pasaremos a añadir controladores onevent.

      Paso 2: Gestionar eventos de arrastrar y soltar con JavaScript

      Actualmente, si soltamos el ratón mientras arrastramos el elemento que se puede arrastrar, no pasará nada. Para activar una acción en arrastrar o soltar en elementos DOM, necesitaremos usar la API Drag and Drop:

      • ondragstart: Este controlador de eventos se adjuntará a nuestro elemento draggable y se accionará cuando se produzca un evento dragstart
      • ondragover: Este controlador de eventos estará adjunto a nuestro elemento dropzone y se accionará cuando se produzca un evento dragover
      • ondrop: Este controlador de eventos también estará adjunto a nuestro elemento dropzone y se accionará cuando se produzca un evento drop.

      Nota: En total hay ocho controladores de eventos: ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart y ondrop. Para nuestro ejemplo, no los necesitaremos todos.

      Primero, vamos a hacer referencia a un nuevo archivo script.js en el archivo index.html:

      index.html

      <body>
        ...
        <script src="https://www.digitalocean.com/community/tutorials/script.js"></script>
      </body>
      

      Luego, cree un nuevo archivo script.js:

      El objeto DataTransfer realizará un seguimiento de la información relacionada con el arrastre actual. Para actualizar nuestro elemento en arrastrar y soltar, debemos acceder directamente al objeto DataTransfer. Para hacer esto, podemos seleccionar la propiedad dataTransfer desde el DragEvent del elemento DOM.

      Nota: El objeto DataTransfer puede realizar un seguimiento técnico de la información de varios elementos que se arrastran al mismo tiempo. Por nuestro ejemplo, nos enfocaremos en arrastrar un elemento.

      El método setData del objeto dataTransfer se puede usar para configurar la información del estado de arrastre para el elemento que arrastra actualmente. Emplea dos parámetros:

      • una cadena que declara el formato del segundo parámetro
      • los datos reales que se hayan transferido

      Nuestro objetivo es mover nuestro elemento draggable a un nuevo elemento principal. Deberíamos poder seleccionar nuestro elemento draggable con un id único. Podemos configurar el id del elemento arrastrado con el método setData para que pueda utilizarse más adelante.

      Revisemos nuestro archivo script.js y creemos una nueva función para usar setData:

      script.js

      function onDragStart(event) {
        event
          .dataTransfer
          .setData('text/plain', event.target.id);
      }
      

      Nota: Los navegadores Internet Explorer del 9 al 11 aparentemente tienen problemas para usar 'text/plain'. El formato debe 'text' para ese navegador.

      Para actualizar el estilo CSS del elemento arrastrado, podemos acceder a sus estilos usando el evento DOM de nuevo y configurando el estilo que nuestra preferencia para el currentTarget.

      Agreguemos a nuestra función y cambiemos el backgroundColor a yellow:

      script.js

      function onDragStart(event) {
        event
          .dataTransfer
          .setData('text/plain', event.target.id);
      
        event
          .currentTarget
          .style
          .backgroundColor="yellow";
      }
      

      Nota: Los estilos que cambie deberán actualizarse manualmente de nuevo al soltar si desea estilos de arrastrar solamente. Si cambia algo cuando empieza a arrastrar, el elemento arrastrado mantendrá ese nuevo estilo a menos que lo modifique de nuevo.

      Ahora ya tenemos nuestra función de JavaScript para cuando se inicia el arrastre.

      Podemos añadir ondragstart al elemento draggable en index.html:

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            draggable
          </div>
        </div>
      
        <div class="example-dropzone">
          dropzone
        </div>
      </div>
      

      Vea index.html en su navegador. Si intenta arrastrar su elemento ahora, se aplicará el estilo declarado en nuestra función:

      Gif animado que representa un elemento que se arrastra, pero que no se suelta

      Sin embargo, no pasará nada cuando suelte el botón del ratón.

      El siguiente controlador de eventos que se accionó en esta secuencia es ondragover.

      Normalmente, el comportamiento predeterminado de soltar para ciertos elementos DOM como <div> en navegadores no acepta la función de soltar. Este comportamiento interceptará el comportamiento que estamos tratando de implementar. Para garantizar que obtengamos el comportamiento de soltar deseado, aplicaremos preventDefault.

      Revisemos el archivo script.js y creemos una nueva función para usar preventDefault: Añada este código al final del archivo:

      script.js

      function onDragOver(event) {
        event.preventDefault();
      }
      

      Ahora, podemos añadir ondragover a nuestro elemento dropzone en index.html:

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            draggable
          </div>
        </div>
      
        <div
          class="example-dropzone"
          ondragover="onDragOver(event);"
        >
          dropzone
        </div>
      </div>
      

      En este momento, aún no hemos escrito el código para controlar la función real de soltar. El controlador de eventos final que se accionó en esta secuencia es ondrop.

      Volvamos a revisar nuestro archivo script.js y creemos una nueva función.

      Podemos hacer referencia a los datos que guardamos anteriormente con el método setData del objeto dataTransfer. Usaremos el método getData del objeto dataTransfer. Los datos que configuramos fueron el id, así que eso es lo que se devolverá:

      script.js

      function onDrop(event) {
        const id = event
          .dataTransfer
          .getData('text');
      }
      

      Seleccione nuestro elemento draggable con el id que recuperamos:

      script.js

      function onDrop(event) {
        // ...
      
        const draggableElement = document.getElementById(id);
      }
      

      Seleccione nuestro elemento dropzone:

      script.js

      function onDrop(event) {
        // ...
      
        const dropzone = event.target;
      }
      

      Añada nuestro elemento draggable al dropzone:

      script.js

      function onDrop(event) {
        // ...
      
        dropzone.appendChild(draggableElement);
      }
      

      Restablezca nuestro objeto dataTransfer:

      script.js

      function onDrop(event) {
        // ...
      
        event
          .dataTransfer
          .clearData();
      }
      

      Ahora, podemos añadir ondragover a nuestro elemento dropzone en index.html:

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            draggable
          </div>
        </div>
      
        <div
          class="example-dropzone"
          ondragover="onDragOver(event);"
          ondrop="onDrop(event);"
        >
          dropzone
        </div>
      </div>
      

      Una vez hecho esto, tendremos una función de arrastrar y soltar finalizada. Vea index.html en su navegador y arrastre el elemento draggable al dropzone.

      Gif animado que representa un elemento que se arrastra y se suelta en un objetivo para soltar

      Nuestro ejemplo gestiona el caso de un solo elemento que se puede arrastrar y un único objetivo para soltar. Puede tener varios elementos que se pueden arrastrar, varios objetivos para soltar y personalizarlos con todos los demás controladores de eventos de la API Drag and Drop

      Paso 3: Crear un ejemplo avanzado con múltiples elementos que se pueden arrastrar

      Aquí hay un ejemplo más de cómo se podría usar esta API: una lista de cosas por hacer con tareas que se pueden arrastrar de una columna "Tareas pendientes" a otra columna de "Completadas".

      Gif animado que representa múltiples tareas siendo arrastradas y soltadas en la columna Completadas

      Para crear su propia lista de tareas pendientes, añada más elementos que se pueden arrastrar con id únicos a index.html:

      index.html

      <div class="example-parent">
        <h1>To-do list</h1>
        <div class="example-origin">
          To-do
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            thing 1
          </div>
          <div
            id="draggable-2"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            thing 2
          </div>
          <div
            id="draggable-3"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            thing 3
          </div>
          <div
            id="draggable-4"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            thing 4
          </div>
        </div>
      
        <div
          class="example-dropzone"
          ondragover="onDragOver(event);"
          ondrop="onDrop(event);"
        >
          Done
        </div>
      </div>
      

      Vea index.html en su navegador y arrastre los elementos en la columna Tareas pendientes a la columna Completadas. Ha creado una aplicación de tareas pendientes y ha probado su funcionalidad.

      Conclusión

      En este artículo, creó una app de tareas pendientes para explorar la funcionalidad de arrastrar y soltar que está disponible para los navegadores web modernos.

      La API Drag and Drop proporciona múltiples opciones para personalizar sus acciones más allá de arrastrar y soltar. Por ejemplo, puede actualizar el estilo CSS de sus elementos arrastrados. Además, en vez de mover el elemento, puede elegir copiar el elemento que se puede arrastrar de forma que se duplique al soltarse

      Tenga en cuenta que, si bien muchos navegadores web son compatibles con esta tecnología, es posible que no pueda serle útil si su audiencia tiene dispositivos que no son compatibles con esta funcionalidad.

      Para obtener más información sobre todo lo que puede soltar con la API Drag and Drop , consulte los documentos de MDN.



      Source link

      Como criar elementos de arrastar e soltar com JavaScript e HTML genéricos


      Introdução

      Arrastar e soltar é uma interação comum presente em muitas interfaces gráficas de usuário.

      Existem bibliotecas de JavaScript pré-existentes para adicionar um recurso de arrastar e soltar à sua aplicação. No entanto, pode haver situações em que uma biblioteca não está disponível ou introduz uma sobrecarga ou dependência que seu projeto não precisa. Nessas situações, o conhecimento das APIs disponíveis em navegadores Web modernos pode oferecer soluções alternativas para você.

      A API HTML de arrastar e soltar depende do modelo de eventos do DOM para obter informações sobre o que está sendo arrastado ou solto e atualizar esse elemento. Com os manipuladores de eventos JavaScript, você pode transformar qualquer elemento em um item arrastável ou em um item no qual se possa soltar outro elemento.

      Neste tutorial, vamos construir um exemplo de arrastar e soltar usando a API HTML com JavaScript genérico para isso. Desse modo, usaremos também os manipuladores de eventos.

      Pré-requisitos

      Para completar este tutorial, você precisará de:

      • Um navegador Web moderno que suporta a API de arrastar e soltar (Chrome 4+, Firefox 3.5+, Safari 3.1+, Edge 18+).

      Passo 1 — Criando o projeto e a marcação inicial

      Nosso projeto consistirá de um contêiner com dois tipos de elementos filhos:

      • Elementos filhos que você pode arrastar
      • Elementos filhos que podem ter elementos soltos neles

      Primeiro, abra sua janela de terminal e crie um novo diretório de projeto:

      • mkdir drag-and-drop-example

      Em seguida, navegue até esse diretório:

      Em seguida, crie um arquivo index.html nesse diretório:

      Depois disso, adicione o código boilerplate para uma página em HTML:

      index.html

      <!DOCTYPE html>
      <html>
        <head>
          <title>My Drag-and-Drop Example</title>
          <link rel="stylesheet" href="https://www.digitalocean.com/community/tutorials/style.css" />
        </head>
        <body>
        </body>
      </html>
      

      E, entre as tags <body>, adicione seu item draggable e sua dropzone (destino para soltar):

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
          >
            draggable
          </div>
        </div>
      
        <div
          class="example-dropzone"
        >
          dropzone
        </div>
      </div>
      

      Salve e feche o arquivo. Em seguida, crie um arquivo style.css:

      A seguir, adicione estilos para os elementos em nosso arquivo index.html:

      style.css

      .example-parent {
        border: 2px solid #DFA612;
        color: black;
        display: flex;
        font-family: sans-serif;
        font-weight: bold;
      }
      
      .example-origin {
        flex-basis: 100%;
        flex-grow: 1;
        padding: 10px;
      }
      
      .example-draggable {
        background-color: #4AAE9B;
        font-weight: normal;
        margin-bottom: 10px;
        margin-top: 10px;
        padding: 10px;
      }
      
      .example-dropzone {
        background-color: #6DB65B;
        flex-basis: 100%;
        flex-grow: 1;
        padding: 10px;
      }
      

      Isso irá adicionar algumas formatações à aplicação. Agora, visualize o index.html no navegador e observe que isso produz uma <div> draggable e uma <div> dropzone.

      Captura de tela das divs draggable e dropzone

      Em seguida, tornaremos a primeira <div> arrastável adicionando o atributo draggable:

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
          >
            draggable
          </div>
        </div>
      
        <div
          class="example-dropzone"
        >
          dropzone
        </div>
      </div>
      

      Salve e feche o arquivo.

      Por fim, visualize o index.html no navegador novamente. Se clicarmos na <div> draggable e a arrastarmos pela tela, deve haver uma indicação visual de sua movimentação.

      O valor padrão para o atributo draggable é auto. Isso significa que o fato de o elemento ser arrastável será determinado pelo comportamento padrão do seu navegador. Normalmente, isso significa que seleções de texto, imagens e links são arrastáveis sem especificar draggable="true".

      Agora, você tem um arquivo HTML com um elemento arrastável. Vamos prosseguir adicionando manipuladores onevent.

      Atualmente, se liberarmos o mouse enquanto arrastamos o elemento arrastável, nada acontece. Para disparar uma ação ao arrastar ou soltar nos elementos DOM, vamos precisar utilizar a API de arrastar e soltar:

      • ondragstart: este manipulador de eventos será anexado ao nosso elemento draggable e será disparado quando um evento dragstart ocorrer.
      • ondragover: este manipulador de eventos será anexado ao nosso elemento dropzone e será disparado quando um evento dragover ocorrer.
      • ondrop: este manipulador de eventos será anexado ao nosso elemento dropzone e será disparado quando um evento drop ocorrer.

      Nota: existem oito manipuladores de eventos no total: ondrag, ondragend, ondragenter, ondragexit, ondragleave ondragover, ondragstart e ondrop. Para nosso exemplo, não vamos precisar de todos eles.

      Primeiro, vamos fazer referência a um novo arquivo script.js em nosso index.html:

      index.html

      <body>
        ...
        <script src="https://www.digitalocean.com/community/tutorials/script.js"></script>
      </body>
      

      Em seguida, crie um novo arquivo script.js:

      O objeto DataTransfer irá manter o controle das informações relacionadas ao arrasto atual. Para atualizar nosso elemento em arrastar e soltar, precisamos acessar diretamente o objeto DataTransfer. Para fazer isso, selecione a propriedade dataTransfer do element DragEvent do DOM.

      Nota: o objeto DataTransfer pode monitorar tecnicamente informações para vários elementos sendo arrastados ao mesmo tempo. Para o nosso exemplo, vamos focar em arrastar um elemento.

      O método setData do objeto dataTransfer pode ser usado para definir as informações de estado de arrastar para seu elemento atualmente arrastado. Ele recebe dois parâmetros:

      • uma string que declara o formato do segundo parâmetro
      • os dados reais sendo transferidos

      Nosso objetivo é mover o elemento draggable para um novo elemento pai. Precisamos ser capazes de selecionar o elemento draggable com uma id única. Podemos definir a id do elemento arrastado com o método setData para que ela possa ser usada mais tarde.

      Vamos revisitar nosso arquivo script.js e criar uma nova função para usar setData:

      script.js

      function onDragStart(event) {
        event
          .dataTransfer
          .setData('text/plain', event.target.id);
      }
      

      Nota: o Internet Explorer 9 a 11 tem problemas com o uso de 'text/plain'. O formato precisa ser 'text' para esse navegador.

      Para atualizar o estilo CSS do item arrastado, vamos acessar seus estilos usando o evento DOM novamente e definir quaisquer estilos que quisermos para o currentTarget.

      Vamos adicionar à nossa função e alterar o backgroundColor para amarelo:

      script.js

      function onDragStart(event) {
        event
          .dataTransfer
          .setData('text/plain', event.target.id);
      
        event
          .currentTarget
          .style
          .backgroundColor="yellow";
      }
      

      Nota: quaisquer estilos que você alterar precisarão ser atualizados manualmente novamente ao soltar, caso você queira estilos somente de arrastar. Se você mudar alguma coisa quando começar a arrastar, o elemento arrastado irá manter esse novo estilo a menos que você o altere novamente.

      Agora, temos nossa função JavaScript para quando começar a arrastar.

      Adicionaremos ondragstart ao elemento draggable em index.html:

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            draggable
          </div>
        </div>
      
        <div class="example-dropzone">
          dropzone
        </div>
      </div>
      

      Visualize o index.html em seu navegador. Se você tentar arrastar seu item agora, o estilo declarado em nossa função será aplicado:

      Gif animado mostrando um elemento sendo arrastado, mas não sendo solto

      No entanto, nada acontecerá quando você liberar seu clique.

      O próximo manipulador de eventos disparado nesta sequência é ondragover.

      O comportamento padrão de soltar para certos elementos DOM como <div>s em navegadores normalmente não aceita soltar. Esse comportamento irá interceptar o comportamento que estamos tentando implementar. Para garantir que obtemos o comportamento de soltar desejado, iremos aplicar preventDefault.

      Vamos revisitar nosso arquivo script.js e criar uma nova função para usar preventDefault. Adicione esse código ao final do arquivo:

      script.js

      function onDragOver(event) {
        event.preventDefault();
      }
      

      Agora, adicionaremos ondragover ao nosso elemento dropzone em index.html:

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            draggable
          </div>
        </div>
      
        <div
          class="example-dropzone"
          ondragover="onDragOver(event);"
        >
          dropzone
        </div>
      </div>
      

      Neste ponto, ainda não escrevemos o código para lidar com a soltura real. O manipulador de eventos final acionado nesta sequência é ondrop.

      Vamos revisitar nosso arquivo script.js e criar uma nova função.

      Podemos fazer referência aos dados que salvamos anteriormente com o método setData do objeto dataTransfer. Usaremos o método getData do objeto dataTransfer. O dado que definimos foi a id. Assim, isso é o que será retornado a nós:

      script.js

      function onDrop(event) {
        const id = event
          .dataTransfer
          .getData('text');
      }
      

      Selecione nosso elemento draggable com a id que recuperamos:

      script.js

      function onDrop(event) {
        // ...
      
        const draggableElement = document.getElementById(id);
      }
      

      Selecione nosso elemento dropzone:

      script.js

      function onDrop(event) {
        // ...
      
        const dropzone = event.target;
      }
      

      Acrescente nosso elemento draggable ao menu dropzone:

      script.js

      function onDrop(event) {
        // ...
      
        dropzone.appendChild(draggableElement);
      }
      

      Reinicie nosso objeto dataTransfer:

      script.js

      function onDrop(event) {
        // ...
      
        event
          .dataTransfer
          .clearData();
      }
      

      Agora, adicionaremos ondrop ao nosso elemento dropzone em index.html:

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            draggable
          </div>
        </div>
      
        <div
          class="example-dropzone"
          ondragover="onDragOver(event);"
          ondrop="onDrop(event);"
        >
          dropzone
        </div>
      </div>
      

      Feito isso, temos um recurso de arrastar e soltar completo. Visualize o index.html em seu navegador e arraste o elemento draggable para a dropzone.

      Gif animado mostrando um elemento sendo arrastado e solto em um alvo de soltar

      Nosso exemplo trata do cenário de um único item arrastável e um único alvo de soltar. Você pode ter vários itens arrastáveis, vários alvos de soltar e personalizá-los com todos os outros manipuladores de eventos da API de arrastar e soltar.

      Aqui está mais um exemplo de como usar essa API: uma lista de tarefas com tarefas arrastáveis que você pode mover de uma coluna "To-do" para uma coluna "Done".

      Gif animado mostrando várias tarefas sendo arrastadas e soltas em uma coluna Done

      Para criar sua própria lista de tarefas, adicione mais elementos arrastáveis com ids únicas ao index.html:

      index.html

      <div class="example-parent">
        <h1>To-do list</h1>
        <div class="example-origin">
          To-do
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            thing 1
          </div>
          <div
            id="draggable-2"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            thing 2
          </div>
          <div
            id="draggable-3"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            thing 3
          </div>
          <div
            id="draggable-4"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            thing 4
          </div>
        </div>
      
        <div
          class="example-dropzone"
          ondragover="onDragOver(event);"
          ondrop="onDrop(event);"
        >
          Done
        </div>
      </div>
      

      Visualize o index.html em seu navegador e arraste os itens da coluna To-do para a coluna Done. Você criou uma aplicação de lista de tarefas e testou a funcionalidade.

      Conclusão

      Neste artigo, você criou uma aplicação de lista de tarefas para explorar a funcionalidade de arrastar e soltar que está disponível nos navegadores Web modernos.

      A API de arrastar e soltar fornece várias opções para personalizar suas ações além de arrastar e soltar. Por exemplo, você pode atualizar o estilo CSS de seus itens arrastados. Além disso, em vez de mover o item, você pode optar por copiar seu item arrastável para que ele seja replicado ao soltar.

      Tenha em mente que, embora muitos navegadores Web suportem essa tecnologia, pode ser que você não possa confiar nela se seu alvo for composto de dispositivos que não suportam essa funcionalidade.

      Para aprender mais sobre tudo o que você pode soltar com a API de arrastar e soltar, confira a documentação da MDN nela.



      Source link