Ajude o desenvolvimento do site, compartilhando o artigo com os amigos!

Introdução ao js arrastar e soltar

O Node.js fornece uma função Vue.js com diferentes opções para o usuário, como o recurso de arrastar e soltar, no qual transferimos dados de um local para outro, o que significa arrastar e soltar. Ele fornece uma maneira interativa para o usuário manipular seus dados. Quando adicionamos a funcionalidade de arrastar e soltar ao seu projeto, é uma ótima maneira de tornar o aplicativo natural e fácil de usar. Ele fornece diferentes tipos de API para os usuários implementarem a funcionalidade de arrastar e soltar, como arrastar, arrastar, iniciar, arrastar, arrastar, arrastar, sair, arrastar e soltar, etc.Para implementar arrastar e soltar, precisamos de um objeto dataTransfer.

Sintaxe

1. Arraste

startDrag: (evento, produto)
{
event.dataTransfer.dropEffect=‘move’
event.dataTransfer.effectAllowed=‘move’
event.dataTransfer.setData('productID', product.id)
}

Explicação

Na sintaxe de arrastar acima, precisamos armazenar o id do produto e estamos arrastando usando a funcionalidade dataTransfer e também mencionamos aqui que o evento de arrastar será movido.

2. Soltar

onDrop (evento, produto)
{
Const product_ID=event.dataTransfer.getData(‘productID’)
Const product=this.product.find(product=product.id==productID)
lista.produto=lista
}

Explicação

Na sintaxe acima, recuperamos o ID do produto armazenado para que possamos acessá-lo corretamente.

Como o arrastar e soltar funciona no Vue.js?

  1. Devemos instalar o Node.js 10.xe acima em seu sistema e você pode verificar usando o comando node -v em seu terminal.
  2. Devemos instalar a última versão do Vue em seu sistema usando o comando npm i -g @vue/cli.
  3. Em seguida, crie o projeto usando vue para criar um nome de projeto.
  4. Devemos instalar os pacotes arrastáveis em seu projeto usando npm i -S vuedraggable.
  5. Precisamos de conhecimentos básicos sobre Node.js.
  6. Precisamos de conhecimentos básicos sobre Vue.js e seus componentes.
  7. Com a ajuda de arrastar e soltar Vue.js, realizamos diferentes operações.

Antes de explicar devemos conhecer o evento Drag and Drop da seguinte forma.

Vue.js fornece um total de oito tipos de eventos de arrastar e soltar na API e podemos implementá-los em nosso aplicativo.

  • Drag: O evento drag é usado para arrastar o item.
  • dragstart: O evento dragstart é usado para começar a arrastar um item arrastável.
  • dragend: O evento dragend é usado para mostrar as extremidades de arrastar.
  • dragenter: O evento dragenter é usado quando um item arrastado é inserido em uma zona de soltar.
  • dragleave: O evento dragleave é usado quando deixamos um item arrastado.
  • dragover: O evento dragover que usamos quando um item arrastado é movido.
  • drop: O evento drop é usado quando soltamos o item arrastado.
  • dataTransfer Object: O objeto dataTransfer é o objeto mais útil na API de arrastar e soltar. Este objeto dá permissão para começar a arrastar um item e acessá-lo quando o soltarmos

Propriedades do objeto de transferência de dados

  • dropEffect: Este dropEffect é usado para mostrar a operação de arrastar e soltar em andamento.
  • effectAllowed: Isso também mostra a operação de arrastar e soltar.
  • setData: Isso é usado para adicionar valores a objetos DataTransfer.
  • getData: É usado para recuperar valores armazenados.

Exemplo de Vue.js Arrastar e Soltar

Vamos ver exemplos de como o arrastar e soltar funciona para um melhor entendimento. Primeiro, criamos um novo projeto com o nome dnd no qual criamos dois componentes diferentes da seguinte forma.

Nome do primeiro componente como Table.vue o código do componente Table da seguinte forma.

Código:


":id=id
""class=table
"@dragover.prevent
"@drop.prevent=drop
">

Ajude o desenvolvimento do site, compartilhando o artigo com os amigos!

Categoria:

Linguagens de programação