0

Ola eu preciso criar uma função que seja capaz de movimentar o conteudo de uma div para outra, por exemplo

            <li class="itens-interface" id="to-do">
                <div class="topo-interface">
                    <h2 class="font-l">Para fazer</h2>
                </div>
                <div class='body-list' id="to-do-body">
                       <div class="tarefas" id="0">
                            <textarea class="titulo-ef" readonly="readonly">asdasd</textarea>
                            <textarea class="conteudo-ef" readonly="readonly">sadasd</textarea>
                      </div>
                </div>
            </li>
            <li class="itens-interface" id="in-p">
                <div class="topo-interface">
                    <h2 class="font-l">Em progresso</h2>
                </div>
                <div class='body-list' id="in-p-body">
                </div>
            </li>

eu preciso mover a div com a class "tarefas" de dentro da "to-do-body" para a "in-p-body". E alem disso, isso precisa ocorrer clicando em cima do titulo da tarefa que seria a textarea "titulo-ef".

5
  • E qual é a sua dúvida?
    – user142154
    23/11/2019 às 2:00
  • Atualmente to com o problema de que eu tenho 4 objetos (To-do,in-p,rmk,complete) que são os estados das tarefas, e eu preciso encontrar uma forma de na função de transferir o conteudo das div tarefas de uma coluna para outra eu consiga identifcar qual é o estado dessa tarefa, se ela esta na coluna To Do ou In Progress, pra mim saber qual tratamento dar a ela, estava pensando em utilizar o Parents() do jQuery mas n sei se ele se aplica a esse caso. 23/11/2019 às 3:03
  • Fazendo alguns testes aqui utilizando o closest() eu consigo pelo console identificar se é ou não o parent que eu preciso, porem não sei como poderia fazer essa identificação dentro do codigo 23/11/2019 às 3:16
  • Vamos ver se consegui compreender, você quer que ao clicar no textarea titulo-ef, todo o conteúdo da div tarefas (ou seja, a div e seus dois textareas) desapareça da div to-do-body e vá parar na div in-p-body, é isso? 23/11/2019 às 3:16
  • exato, o conteudo tem que ser deletado de uma coluna e passado para a outra 23/11/2019 às 3:20

1 Resposta 1

1

Luan,

Você pode criar um onclick no textarea, no caso o titulo-ef:

<textarea onclick"moveDiv(this)" class="titulo-ef" readonly="readonly">asdasd</textarea>

Declarar a função moveDiv, recebendo o this (textArea), assim já tendo acesso ao textarea e seu parent:

function moveDiv(textArea) {
  //Pego a div de destino
  let divEmPrograsso = document.getElementById("in-p-body");

  //Faço o append de todo o conteúdo do parent do textArea, que no caso é a div <div class="tarefas" id="0">
  divEmPrograsso.appendChild(textArea.parentElement);
  //Removo o evento de click, essa linha não terá efeito, mas pode ser útil conforme suas implementações
  textArea.removeAttribute("onclick");
}

Com isso eu já consigo fazer toda da mudança do conteúdo de uma DIV para outra.


Veja um exemplo prático:

function moveDiv(textArea) {
  let divEmPrograsso = document.getElementById("in-p-body");
  divEmPrograsso.appendChild(textArea.parentElement);
  textArea.removeAttribute("onclick");
}
<li class="itens-interface" id="to-do">
  <div class="topo-interface">
    <h2 class="font-l">Para fazer</h2>
  </div>

  <div class='body-list' id="to-do-body">
    <div class="tarefas" id="0">
      <textarea onclick="moveDiv(this)" class="titulo-ef" readonly="readonly">asdasd</textarea>
      <textarea id="conteudo-ef" class="conteudo-ef" readonly="readonly">sadasd</textarea>
    </div>
  </div>
</li>

<li class="itens-interface" id="in-p">
  <div class="topo-interface">
    <h2 class="font-l">Em progresso</h2>
  </div>

  <div class='body-list' id="in-p-body">
  </div>
</li>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .