0

Eu tenho um pequeno programa que faz o "drag & drop" mantendo os elementos originais intactos para serem usados posteriormente. São 3 divs (em cinza) que podem ser arrastados para uma outra div (em azul) e ser empilhados. Segue o código:

index.html

<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>


<script type="text/javascript">
  function drag(event) {
    $(this).addClass('active');
  }

  function drop(event) {
    var div = document.createElement('div');
    var dropdiv = document.querySelector(".dropClass");
    var mouseX = event.clientX - dropdiv.getBoundingClientRect().x;
    var mouseY = event.clientY - dropdiv.getBoundingClientRect().y;

    if ((mouseX > 0 && mouseX < (dropdiv.clientWidth-event.target.clientWidth)) &&  (mouseY > 0 && mouseY < (dropdiv.clientHeight-event.target.clientHeight))) {

      div.id = event.target.id;
      div.className = "active";
      div.innerHTML = event.target.textContent;
      dropdiv.appendChild(div);
    }
  }
</script>

<h2> Start</h2>
<div class="page">
  <div class="vertical">
    <div class="container"  ondragstart="drag(event)" ondragend="drop(event)" draggable="true"><h3 class="text" >1</h3></div>
    <div class="container"  ondragstart="drag(event)" ondragend="drop(event)" draggable="true"><h3 class="text">2</h3></div>
    <div class="container"  ondragstart="drag(event)" ondragend="drop(event)" draggable="true"><h3 class="text">3</h3></div>
  </div>
  <div class="dropClass">

  </div>
</div>

style.css

.page {
    width: 100vw;
    height: 1500px;
}

.vertical{
    width: 450px;
    height:700px;
    background-color: white;
    display: flex;
    float: left;
}

.container{
    margin-top: 10px;
    margin-left: 10px;
    width: 90px;
    height: 90px;
    background-color: gray;
    text-align: center;
    border: black;
    border-color: blue;
    border-width: thin;
    border-style: ridge;
}

.text {
  display: inline-block;
  vertical-align: center;
  box-sizing: content-box;
  font-size: 20px;
  height: auto;
  margin: auto;
}

.dropClass {
  float: left;
  margin: 50px;
  width: 550px;
  height: 550px;
  background-color: blue;
  border-color: black;
}

.active {
    font-size: 30px;
    border:none;
  background-color: white;
  position: relative;
    transform: translate(0, 0);
}

Mas eu gostaria que quando arrastar o elemento (o que fica grudado ao mouse) este ficasse com o background em branco e sem bordas (no caso aplicar a classe active), mas sem afetar o original somente a "copia" que está sendo arrastada. Há alguma maneira de se fazer isso?

1 Resposta 1

-1

Para alterar um elemento arrastado sem alterar o original, você pode criar um clone do elemento original e, em seguida, arrastar o clone. Para tanto basta alterar a função drag da seguinte forma:

  function drag(event) {
      // Crie um clone do elemento original
      var clone = event.target.cloneNode(true);
      // Defina um ID único para o clone para evitar conflitos
      clone.id = 'clone';
      // Defina a opacidade do clone para diferenciá-lo do original
      clone.style.opacity = '0.5';
      clone.classList.add('active');
      // Adicione o clone ao corpo do documento
      document.body.appendChild(clone);

      // Defina os dados de arrastar para o clone
      event.dataTransfer.setData('text/plain', 'dragging');

      // Salve uma referência ao clone para acessá-lo posteriormente
      event.dataTransfer.setDragImage(clone, 50, 50);
  }

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 .