1. java
  2. android
  3. c#
  4. .net
  5. javascript
  6. php
  7. jquery
  8. html
  9. sql

Como criar alerta em javascript por coluna

Pessoal, estou com um problema urgente. Aqui na empresa que trabalho, foi solicitado que eu fizesse um acompanhamento de tarefa em quadros exatamente como é o trello.

Imagem ilustrativa: https://images.app.goo.gl/PpRnzeznTBs9bYx76

Os campos eu criei em tabela e os "quadro/task" criei em div, porém foi solicitado que quando eu passar o mause para próxima etapa desse um alart na tela. (não sei como fazer esse alart por colunas)

Por Exemplo: Estou no To DO e eu preciso arrastar para done() então apareceria um alart dizendo "Quadro arrastado para done!". O mesmo iria acontecer se eu trocasse para qualquer outra coluna exibindo mensagens diferentes.

Segue o meu código.

<table id="data-table-buttons" class="table table-striped table-bordered table-td-valign-middle">
                            <thead>
                                <tr>

                                    <th class="text-nowrap text-center">TO DO</th>
                                    <th class="text-nowrap text-center">DOING</th>
                                    <th class="text-nowrap text-center">DONG</th>
                                    <th class="text-nowrap text-center">DERIVED</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="largura-tabela col-lg-3" ondrop="drop(event)" ondragover="allowDrop(event)">
                                        <div id="drag1" draggable="true" ondragstart="drag(event)">
                                            <div class="widget widget-stats bg-blue">
                                                <div class="stats-icon"><i class="fa fa-thumbs-up"></i></div>
                                                <div class="stats-info">
                                                    <h4>TICKET: 001</h4>
                                                    <h4>TITULO: TESTE 01</h4>
                                                    <h4 id="status">ESTADO: TO DO</h4>

                                                    <p>BAIXA PRIORIDADE</p>
                                                </div>
                                                <div class="stats-link">
                                                    <a href="javascript:;">DETALHES DA OCORRÊNCIA <i class="fa fa-arrow-alt-circle-right" data-toggle="tooltip" data-placement="right" title="Alguma descrição da ocorrência"></i></a>
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="largura-tabela" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
                                    <td class="largura-tabela" ondrop="drop(event)" ondragover="allowDrop(event)">
                                        <div id="drag2" draggable="true" ondragstart="drag(event)" >
                                            <div class="widget widget-stats bg-danger">
                                                <div class="stats-icon"><i class="fa fa-exclamation"></i></div>
                                                <div class="stats-info">
                                                    <h4>TICKET: 002</h4>
                                                    <h4>TITULO: TESTE 02</h4>
                                                    <h4 id="status">ESTADO: DONG</h4>
                                                    <p>ALTA PRIORIDADE</p>
                                                </div>
                                                <div class="stats-link">
                                                    <a href="javascript:;">DETALHES DA OCORRÊNCIA <i class="fa fa-arrow-alt-circle-right" data-toggle="tooltip" data-placement="right" title="Alguma descrição da ocorrência""></i></a>
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="largura-tabela" ondrop="drop(event)" ondragover="allowDrop(event)">
                                        <div id="drag3" draggable="true" ondragstart="drag(event)">
                                            <div class="widget widget-stats bg-warning">
                                                <div class="stats-icon"><i class="fa fa-question"></i></div>
                                                <div class="stats-info">
                                                    <h4>TICKET: 003</h4>
                                                    <h4>TITULO: TESTE 02</h4>
                                                    <h4 id="status">ESTADO: DERIVED</h4>
                                                    <p>MÉDIA PRIORIDADE</p>
                                                </div>
                                                <div class="stats-link">
                                                    <a href="javascript:;">DETALHES DA OCORRÊNCIA <i class="fa fa-arrow-alt-circle-right" data-toggle="tooltip" data-placement="right" title="Alguma descrição da ocorrência"></i></a>
                                                </div>
                                            </div>
                                        </div>
                                    </td>

                                </tr>

                            </tbody>
                        </table>

Javascript abaixo

  function status(msg) {
              document.getElementById('status').id = "teste";
        }


        function allowDrop(ev) {

            ev.preventDefault();
        }

        function drag(ev) {
            ev.dataTransfer.setData("text", ev.target.id);
        }

        function drop(ev) {
            ev.preventDefault();
            var data = ev.dataTransfer.getData("text");
            ev.target.appendChild(document.getElementById(data));
            status("TESTA" + e.target.getAttribute('id'));
        }
  1. Você vai ver essas setas em qualquer página de pergunta. Com elas, você pode dizer se uma pergunta ou uma resposta foram relevantes ou não.
  2. Edite sua pergunta ou resposta caso queira alterar ou adicionar detalhes.
  3. Caso haja alguma dúvida sobre a pergunta, adicione um comentário. O espaço de respostas deve ser utilizado apenas para responder a pergunta.
  4. Se o autor da pergunta marcar uma resposta como solucionada, esta marca aparecerá.
  5. Clique aqui para mais detalhes sobre o funcionamento do GUJ!

0 resposta

Não é a resposta que estava procurando? Procure outras perguntas com as tags javascript jquery html5 ou faça a sua própria pergunta.