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
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.
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 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.
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.
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
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
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
@@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.
Explicação bem rápida e pratica, justamente o que precisava
muuuuuito bom mano, sua didática é maravilhosa, obrigado pela ajuda!!
Estou procurando fazer essa funcionalidade e você me explicou passo-a-passo! Muito obrigado!!
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
Que massa Gustavo 🚀🚀
Thankhs mans , very simple and straightforward
Amigo, muito bom seu script, vc adaptaria para salvar em um BD esse código, e quanto cobra para fazer a adaptação?
valeu cara, sucesso
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.
Amigo por acaso tem algo assim que funcione com touchscreen tb?
Muito bom! Ajudou muito. :)
Muito bom! Parabéns
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()".
Muito obrigado pelo feedback, vou tentar melhorar nesses pontos :D
@@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.
Show de bola... muito legal mesmo.
Show, gostei.
Toooop! Obrigado!
vlw, inscrição aqui amigo, keep going.
Valeeu
Muito top!
Uma pergunta, rota restrita só é possível com JavaScript puro e de forma segura?
Obrigado!
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.
Tem alguns eventos js relacionados, acredito que o ondrop ou ondragend possam atender
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
Olá, desculpe incomodar, conseguiu fazer isso?
Uma dúvida, quando você adiciona um evento ao document ele para para todos os elementos do dom?
Sim
Bem legal, olha como eu posso fazer para arrastar e soltar mais de um elemento ?
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
Muito bacana, parabens!
Agradeço o feedback :D
Show!
Show! 👏🏽👏🏽
tem como ser feito isso com componentes, controles como o Bubble faz ?
Não tem :/
Tem algum tutorial para salvar a ordem em banco de dados?
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
Você deveria criar um curso
Tenho muito o que aprender antes disso kk
adorei o video, mas teria como fazer com que as posições sejam salvas no localstorage? fica aqui minha duvida.
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
@@will_dev Eu nunca pensaria em algo assim kkk é uma solução mais simples do que eu pensei. Muito obrigado, professor.
O problema é que quando carrega a pagina ele volta a posição inicial, precisava que ele mantesse a alteração.
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
Usa LocalStorage
@@mr_darkkk O que seria ?
Armazenar no Banco de dados ?
@@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.
Quando a gnt acha que ja ta sabendo de bastante coisa kkkkkk
Aí vemos que estamos só no início kk
Na boa , essa aula tá mais pra hackers.
POR QUE O BOLSONARO VETOU LIMITAR OS PODERES DO STF??
Pra te comer 😂