Criando Drag and Drop com JavaScript (Arrastar e Soltar)

[@henriquelenda9020]

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]

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

[@GustavoHenrique-iq3uu]

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

[@will_dev]

Que massa Gustavo 🚀🚀

[@medCherkaoui]

Thankhs mans , very simple and straightforward

[@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.

[@moisesantonio4335]

valeu cara, sucesso

[@eduardofagundesferreira8891]

Show de bola... muito legal mesmo.

[@cssgabriel]

Muito bom! Parabéns

[@brunovilela_trp]

Amigo, muito bom seu script, vc adaptaria para salvar em um BD esse código, e quanto cobra para fazer a adaptação?

[@kikikinha]

Muito bom! Ajudou muito. :)

[@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()".

[@will_dev]

Muito obrigado pelo feedback, vou tentar melhorar nesses pontos :D

[@PexuPixo]

@@will_dev seus vídeos me ajudam bastante, não querendo ser chato, sei da dificuldade que é planejar, gravar, editar e os vídeos, manter um canal, mas para seu canal crescer mais ainda as críticas construtivas têm seu valor também, não somente os elogios, esses últimos motivam, já as críticas construtivas dão um norte sobre aspectos a serem melhorados. Acredito que com o tempo sua didática evoluirá ainda mais.

[@DanteDerette]

Toooop! Obrigado!

[@lapluiz]

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

[@tiagomarianodjesus]

Show, gostei.

[@gapaiva44]

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

[@will_dev]

Aqui no canal não, mas não deve ser muito difícil, tem que salvar a coluna, e no salvar você percorre os filhos dessa coluna para identificar cada item e salvar com uma ordem, algo assim

[@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

[@emanueloliveira2205]

Olá, desculpe incomodar, conseguiu fazer isso?

[@fernandafortes3782]

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

[@will_dev]

Agradeço seu feedback :D Olha, sobre arrastar vários não tentei ainda, mas daria para você selecionar os itens ao clicar em cima, adicionando alguma class para esses itens, aí ao mover pegar todos que tenham essa class

[@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.

[@will_dev]

Tem alguns eventos js relacionados, acredito que o ondrop ou ondragend possam atender

[@tonyriko]

Muito bacana, parabens!

[@will_dev]

Agradeço o feedback :D

[@walney2008]

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

[@will_dev]

Não tem :/

[@renatozr11]

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

[@will_dev]

Sim

[@rarozodev]

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

[@will_dev]

Valeeu

[@robertomedeiros6730]

Show!

[@MatheusSilva-qm3ph]

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

[@eduardospek]

Show! 👏🏽👏🏽

[@engereggae1]

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

[@will_dev]

Hmm, nesse caso daria pra armazenar os itens no storage do navegador, e validar se tiver algo, carrega, se não carrega do zero os itens

[@mr_darkkk]

Usa LocalStorage

[@engereggae1]

@@mr_darkkk O que seria ?

[@engereggae1]

Armazenar no Banco de dados ?

[@vkRenan]

​@@engereggae1 Você precisa entender como salvar esse item no banco de dados. Você precisaria ter uma tabela de colunas, onde cada coluna pode ter um cartão. O cartão também seria uma tabela no banco de dados, onde você pode criar cartões. Você só precisaria encontrar uma maneira de saber quando o cartão mudou de coluna e salvar essa alteração no banco de dados.

[@Francisco_Reneilson]

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

[@will_dev]

Agradeço o feedback! Tem sim, dá para armazenar um objeto com 3 arrays por exemplo (um para cada coluna), e em cada array, pode ter o nome da coluna e um array dos cards, aí cada vez que mudar só percorrer o que está em tela e salvar

[@Francisco_Reneilson]

@@will_dev Eu nunca pensaria em algo assim kkk é uma solução mais simples do que eu pensei. Muito obrigado, professor.

[@jonathastrajano1700]

Você deveria criar um curso

[@will_dev]

Tenho muito o que aprender antes disso kk

[@augustomoraesss3651]

Quando a gnt acha que ja ta sabendo de bastante coisa kkkkkk

[@will_dev]

Aí vemos que estamos só no início kk

[@ttaylor2370]

Na boa , essa aula tá mais pra hackers.

[@pliniopvv2]

POR QUE O BOLSONARO VETOU LIMITAR OS PODERES DO STF??

[@leptospiroseclips]

Pra te comer 😂