Criando Drag and Drop com JavaScript (Arrastar e Soltar)

Nesse vídeo apresento a criação da funcionalidade drag and drop (arrastar e soltar componentes) utilizando JavaScript

================
CURSOS QUE INDICO:
Full Stack Web PRO do zero ao avançado
React Native do zero ao Avançado
Pacote Full Stack
Curso Criando Apps de I.A
Curso de Flutter Completo
================

Instagram de Tecnologia:

Linkedin:

#draganddrop #kanban #javascript

[henriquelenda]

Explicação bem rápida e pratica, justamente o que precisava

[gustavogmartinelli]

Estou procurando fazer essa funcionalidade e você me explicou passo-a-passo! Muito obrigado!!

[netopazini]

bom mano, sua didática é maravilhosa, obrigado pela ajuda!!

[GustavoHenrique-iquu]

Estava pensando em fazer um CRM para mim como exercício para aprender JS, li seu código e teste no meu browser colocando console.log em tudo que não entendia e entendi! Valeu, meu caro. Com isso aprendi várias WEB APIs que não fazia ideia que existia

[medCherkaoui]

Thankhs mans, very simple and straightforward <3

[PexuPixo]

Os projetos práticos são ótimos, o seu tempo dedicado aos vídeos para produzir conteúdo e tal. Sei que os vídeos geralmente são curtos, só que alguns pontos pelo menos pra mim ficam superficiais e confusos, às vezes, eu tô tentando esmiuçar partes desse código ainda pra entender como funciona tim-tim por tim-tim a função "getNewPosition()", para entender exatamente o que faz aquele "for", o método "getBoundingClientRect()", o qual eu desconhecia e também o "insertAdjacentElement()" e "prepend()".

[rarozodev]

vlw, inscrição aqui amigo, keep going.

[normalzinho]

e como faço para que ele reconheça que pode ter um algo lá dentro caso eu mova um conteúdo, ele automaticamente ja entende? porque estou tentando fazer mais o meu preciso que ele faça um push na lista e faz um post para o banco.

[lapluiz]

Amigo por acaso tem algo assim que funcione com touchscreen tb?

[lapluiz]

Muito obrigado pelo vídeo com um código tão simples, vou tentar implementar o evento touch para quando o device não for desktop. vlw

[MatheusSilva-qmph]

Muito top!
Uma pergunta, rota restrita só é possível com JavaScript puro e de forma segura?
Obrigado!

[charlesandersonwd]

Muito top! Parabéns!

Inserindo um atributo "data-column" nas colunas e "data-item" nos itens, como seria para que, ao soltar o item, executasse uma função com estes valores como parametros?

Ex.: moveTo(item_id, column_id);

function moveTo(item_id, column_id){
console.log('moveu o item '+ tem_id + 'para a coluna ' + column_id);
}

Que aí já permitiria que as alterações persistissem no backend.

[fernandafortes]

Bem legal, olha como eu posso fazer para arrastar e soltar mais de um elemento ?

[renatozr]

Uma dúvida, quando você adiciona um evento ao document ele para para todos os elementos do dom?

[gapaiva]

Tem algum tutorial para salvar a ordem em banco de dados?

[walney]

tem como ser feito isso com componentes, controles como o Bubble faz ?

[Francisco_Reneilson]

adorei o video, mas teria como fazer com que as posições sejam salvas no localstorage? fica aqui minha duvida.

[engereggae]

O problema é que quando carrega a pagina ele volta a posição inicial, precisava que ele mantesse a alteração.

[augustomoraesss]

Quando a gnt acha que ja ta sabendo de bastante coisa

[ttaylor]

Na boa, essa aula tá mais pra hackers.