Como criar um alart entre as colunas da tabela

Pessoal, estou com um problema que preciso resolver urgente!
Sou novo no GUJ então peço desculpa se estou reformulando essa solicitação de uma forma errônea.
Seguinte foi solicitado que eu criasse um página onde teria uma tabela e dentro da tabela/coluna teria um bloco onde poderia ser movido da coluna aprovado para em andamento.
Mesma coisa do trello conforme a imagem.

Essa parte consegui fazer utilizando a técnica drag drop, porém agora preciso que quando o bloco saia do TODO e vá para doing seja enviada um alart “voce agora esta em Doing”.

segue meu código.

<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 id="alerta1" 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)">
                                <div id="alerta2"></div>
                                </td>

                                <td class="largura-tabela" ondrop="drop(event)" ondragover="allowDrop(event)">
                                    <div id="alerta3">
                                        <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>
                                    </div>
                                </td>
                                <td class="largura-tabela" ondrop="drop(event)" ondragover="allowDrop(event)">
                                    <div id="alerta4">
                                        <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>
                                    </div>
                                </td>

                            </tr>
           
                        </tbody>
                    </table>

Segue o script

// função que vai verificar qual id da coluna pegar e exibir a mensagem.
    function validar() {
         if (document.getElementById('alarta2')) {
            alert('Deu certo');
         } else if (document.getElementById('drag1')) {
             alert('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));
        validar();
    }

1 Resposta

Topicos relacionados