title: How can I drag and drop elements with HTML/CSS?
body: <p>I'm trying to make a drag and drop API to use in my website.</p>
  <p>The drag part is working, but when I drop the element on the target <code>div</code>, that <code>div</code> only disappears.</p>
  <p><strong>HTML</strong></p>
  <p><a href="https://codeshare.io/5Dx4XW" rel="nofollow noreferrer">https://codeshare.io/5Dx4XW</a></p>
  <p><strong>CSS</strong></p>
  <p><a href="https://codeshare.io/aVxw89" rel="nofollow noreferrer">https://codeshare.io/aVxw89</a></p>
  <p><strong>Java Script</strong></p>
  <p><a href="https://codeshare.io/GqZWOA" rel="nofollow noreferrer">https://codeshare.io/GqZWOA</a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const draggables = document.querySelectorAll('.draggable');
  const dropables = document.querySelectorAll('.dropable');
  
  //Event Listeners
  
  draggables.forEach(draggable =&gt;{
      draggable.addEventListener('dragstart', dragStart)
      draggable.addEventListener('dragend', dragEnd)
  })
  
  dropables.forEach(dropable=&gt;{
      dropable.addEventListener('dragenter', dragEnter);
      dropable.addEventListener('dragover', dragOver);
      dropable.addEventListener('dragleave', dragLeave);
      dropable.addEventListener('drop', dragDrop);
  })
  
  //Funções
  
  function dragStart(){
      this.className +=' hold';
      setTimeout(() =&gt; (this.className = 'desabilitado'), 0);
      this.parentElement.className = 'dropable';
      let clone = this.lastChild.cloneNode(true);
      this.parentElement.appendChild(clone)
  }
  
  function dragEnd(){
      this.className = 'draggable'
      this.parentElement.className = ' ';
      this.parentElement.lastChild.remove();
  }
  
  function dragOver(e) {
      e.preventDefault();
  
    }
    
    function dragEnter(e) {
      e.preventDefault();
      this.className += ' hovered';
    }
    
    function dragLeave() {
      this.className = 'dropable';
    }
    
    function dragDrop() {
      this.className = ' ';
      const holded = document.querySelector('.hold');
      this.appendChild(holded);
  
    }
    </code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.dragdroparea{
    display: flex;
    flex-direction: row;
    position: relative;
    align-items: center;
    justify-content: center;
    z-index: 50;
  
    height: 60vh;
    width:  80vw;
  }
  
  .coluna{
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    width: 37vw;
    height: 56vh;
  }
  
  .linha{
    display: flex;
    flex-direction: row;
    margin-bottom: 1vw;
  }
  
  .draggable{
    position: relative;
    width: 3vw;
    height: 2vw;
    border-radius: 7px;
    background-color: #e25f07;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    margin-right: 0.5vw;
    cursor: move;
    z-index: 10000;
  }
  
  .dropable{
    position: relative;
    width: 3vw;
    height: 2vw;
    border-radius: 7px;
    border-color: #e25f07;
    border-style: dashed;
    border-width: 2.3px;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 0.5vw;
    z-index: 500;
    color: #e25f07;
    
  }
  
  .resposta{
    margin-right: 1vw;
  }
  
  .textodrag{
    width: 31vw; 
  }
  
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  ::-webkit-scrollbar-button {
    width: 0px;
    height: 0px;
  }
  ::-webkit-scrollbar-thumb {
    background: #e25f07;
    border: 0px none #ffffff;
    border-radius: 38px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: #f58d47;
  }
  ::-webkit-scrollbar-thumb:active {
    background: #e25f07;
  }
  ::-webkit-scrollbar-track {
    background: #ebe8e6;
    border: 0px none #ffffff;
    border-radius: 55px;
  }
  ::-webkit-scrollbar-track:hover {
    background: #e8e6df;
  }
  ::-webkit-scrollbar-track:active {
    background: #e8e6df;
  }
  ::-webkit-scrollbar-corner {
    background: transparent;
  }
  
  .invisible{
    display: none;
  }
  
  .hovered{
    width: 3.5vw;
    height: 2.5vw;
  }
  
  .hold {
    border: solid 5px #ccc;
  }
  
  .desabilitado{
    display: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;Document&lt;/title&gt;
      
      &lt;link rel="stylesheet" href="./teste2.css"&gt;
    
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="slide active"&gt;      
  
          &lt;div class="conteudovertical"&gt;
              
                  &lt;p class="header1" style="line-height: 20%;"&gt;Garantias e direitos dos participantes de pesquisa&lt;/p&gt;&lt;br&gt;
                  &lt;p class="rodape1"&gt;Agora, arraste todos os direitos dos participantes na caixa ao lado.&lt;/p&gt;
              
  
              &lt;div class="dragdroparea"&gt;
                  &lt;div class="coluna resposta"&gt;
                      &lt;div class="linha"&gt;
                          &lt;div&gt;
                              &lt;div draggable="true" class="draggable"&gt;&lt;p&gt;1&lt;/p&gt;&lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="textodrag"&gt;
                              &lt;p&gt;Receber as informações do estudo de forma
                                  claras&lt;/p&gt;
                          &lt;/div&gt;    
                      &lt;/div&gt;
                      &lt;div class="linha"&gt;
                          &lt;div&gt;
                              &lt;div draggable="true" class="draggable"&gt;&lt;p&gt;2&lt;/p&gt;&lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="textodrag"&gt;
                              &lt;p&gt;Ter oportunidade de esclarecer dúvidas&lt;/p&gt;
                          &lt;/div&gt;    
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="coluna"&gt;
                      &lt;div class="linha"&gt;
                          &lt;div class="dropable"&gt;&lt;/div&gt;
                          &lt;div class="textodrag"&gt;
                          &lt;p&gt;A linguagem utilizada tanto na redação do
                              TCLE quanto no processo de consentimento deve
                              ser adequada a população do estudo.&lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="linha"&gt;
                          &lt;div class="dropable"&gt;&lt;/div&gt;
                          &lt;div class="textodrag"&gt;
                          &lt;p&gt;Durante o processo de consentimento, e a
                              qualquer momento, o participante deve poder
                              esclarecer quaisquer dúvidas relativas ao estudo e
                              ao seu tratamento.&lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
        
  
          &lt;script src="./scripts/dragAndDrop.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>