Transfer content from one Div to another

Asked

Viewed 130 times

0

Hello I need to create a function that is able to move the content from one div to another, for example

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

I need to move the div with the class "tasks" from within the "to-do-body" to the "in-p-body". And besides, this needs to occur by clicking on the title of the task that would be the textarea "title-Ef".

javascript html html5

  • And what is your doubt?

  • Currently I have the problem that I have 4 objects (To-do,in-p,rmk,complete) that are the states of the tasks, and I need to find a way in the function of transferring the contents of the div tasks from one column to another I can identify what is the state of this task, if she’s in the To Do or In Progress column, for me to know what treatment to give her, I was thinking of using jQuery’s Parents() but I don’t know if it applies to this case.

  • Doing some tests here using the Closest() I can by the console identify whether or not the Parent I need, but do not know how I could make this identification inside the code

  • Let’s see if I can understand, you want that by clicking on the title-Ef textarea, all the content of the div tasks (ie the div and its two textareas) disappear from the div to-do-body and go to the div in-p-body, that’s it?

  • exact, the content has to be deleted from one column and passed to the other

1 answer

1


Luan,

You can create a onclick in the textarea, in the case of title-Ef:

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

Declare the function moveDiv, receiving the this (textarea), thus already having access to the textarea and its 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");
}

With this I can already make all of the change of content from one DIV to another.

See a practical example:

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>

Browser other questions tagged javascript html html5

You are not signed in. Login or sign up in order to post.