1

Eu resolvi criar uma aplicação WEB usando interação com o usuário usando a API Drag And Drop (Arrastar e soltar) do JavaScript.

<html>
<head>
  <meta charset="UTF-8">
  <style>

      body {
        margin: 0;
      }

      * {
        margin: 0;
      }
  
      #drag {
        width: 100px;
        height: 100px;
        background: rgb(110, 107, 107);
        position: relative;
      }

      #drop {
        width: 200px;
        height: 200px;
        background: rgb(177, 174, 174);
        position: absolute;
        top: 0;
        left: 200px;
      }

      .paragraph {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        font-family: Arial, Helvetica, sans-serif;
        font-size: 20px;
        color: rgb(255, 255, 255);
      }

  </style>
</head>
<body>

<div id="drag" draggable="true"><p class="paragraph">Arraste</p></div>
<div id="drop"><p class="paragraph">Solte</p></div>

<script>

    let drag = window.document.querySelector("#drag");
    let drop = window.document.querySelector("#drop");

    drag.addEventListener("dragstart", function (event)
    {
      event.dataTransfer.setData("text", event.target.id);
    });

    drop.addEventListener("dragover", function (event)
    {
      event.preventDefault();
      drop.style.border = "5px dotted rgb(120, 120, 120)";
    });

    drop.addEventListener("dragleave", function (event)
    {
      drop.style.border = "none";
    });

    drop.addEventListener("drop", function (event)
    {
      event.preventDefault();
      let data = event.dataTransfer.getData("text");
      event.target.appendChild(window.document.getElementById(data));
      drop.style.border = "none";
    });

</script>

</body>
</html>

Esse código em cima é só um pequeno pedaço da aplicação que eu estou criando só coloquei o código necessário para não ficar muito grande o código, e vocês não perderem tempo visualizando o código por inteiro. Mas o meu problema é o seguinte o Drag And Drop do código acima funciona normalmente, porém quando você arrasta(drag) a div com id="drag"e solta(drop) ela na div com id="drop" a div#drag fica dentro da div#drop em uma posição left: 0 e top: 0 em relação ao seu container pai. O que eu gostaria era que na hora de arrastar a div#drag e soltar ela dentro da div#drop não importa aonde você está soltando a div#drag ela permanecerá na posição em que você soltou dentro da div#drop. Aqui eu citei alguns sites que usam o Drag And Drop em que o mesmo efeito que eu gostaria que acontecesse com a minha aplicação. Material Angular, Scratch.

3
  • Leandro, por que não usa JQuery pra isso? 2/08/2019 às 9:21
  • Leandro, veja se esse link te ajuda. Nele tem uma solução(usando jquery) que faz o que você precisa: mantém o elemento aonde você soltar. 2/08/2019 às 13:31
  • Valeu galera pela ajuda, mas é que eu estou focando apenas em JS e gostaria de uma solução em apenas JS. 2/08/2019 às 14:58

1 Resposta 1

2

Fiz um exemplo sendo uma alternativa para o seu caso que pode ajudar, não sendo a maneira mais funcional de realização, pois como você pode ver no código eu setei as posições específicas onde o elemento a ser arrastado permanecerá após sua soltura. Foi a única maneira que vi de se fazer isto, até pq a Api do draggable ainda não é muito bem desenvolvida (minha visão) sendo bem trabalhosa de aplicá-la, embora, tenha uma documentação bem definida como pode visto aqui aqui:

let drag = window.document.querySelector("#drag");
let drop = window.document.querySelector("#drop");

drag.addEventListener("dragstart", function(event) {
  event.dataTransfer.setData("text", event.target.id);
});

drop.addEventListener("dragover", function(event) {
  event.preventDefault();
  drop.style.border = "5px dotted rgb(120, 120, 120)";
});

drop.addEventListener("dragleave", function(event) {
  drop.style.border = "none";
});

drop.addEventListener("drop", function(event) {
  event.preventDefault();
  let data = event.dataTransfer.getData("text");
  event.target.appendChild(window.document.getElementById(data));
  drop.style.border = "none";
  
  drag.setAttribute("draggable", "false");  // evito o elemento de ser arrastável
});

// no evento dragend é onde seto as posições
drag.addEventListener("dragend", function(e) {
   
  // pageX: posição horizontal / pageY: posição vertical
  // os valores 200 e 400 são para delimitar onde pode ter o drop
  if(e.pageX > 230 && e.pageX < 400 && e.pageY > 30 && e.pageY < 200) {
    drag.style.left = 20+"px";
    drag.style.top = 10+"px";
  }
  if(e.pageX > 260 && e.pageX < 400 && e.pageY > 60 && e.pageY < 200) {
    drag.style.left = 50+"px";
    drag.style.top = 60+"px";
  }
  if(e.pageX > 290 && e.pageX < 400 && e.pageY > 90 && e.pageY < 200) {
    drag.style.left = 80+"px";
    drag.style.top = 90+"px";
  }
})
body {
  margin: 0;
}

* {
  margin: 0;
}

#drag, #newDrag {
  width: 100px;
  height: 100px;
  background: rgb(110, 107, 107);
  position: relative;
}

#drop {
  width: 200px;
  height: 200px;
  background: rgb(177, 174, 174);
  position: absolute;
  top: 0;
  left: 200px;
}

.paragraph {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  color: rgb(255, 255, 255);
  user-select: none;       /* evito dos textos serem selecionáveis e assim serem arrastados */
}
<div id="drag" draggable="true">
  <p class="paragraph">Arraste</p>
</div>
<div id="drop">
  <p class="paragraph">Solte</p>
</div>

6
  • Só que o drag ainda não cai na posição do mouse 2/08/2019 às 15:17
  • Eu encontrei este tutorial hoje, mas não entendi muito como funciona javascript.info/mouse-drag-and-drop 2/08/2019 às 15:18
  • Não cai pq o drag é muito maior que o mouse e na hora de soltar o drag é posicionado em relação ao seu topo esquerdo e não em relação ao mouse. Dei uma olhada no link, aqueles exemplos são mais fáceis de aplicar, pq não tem um drop específico, sendo referente a janela.
    – LeAndrade
    2/08/2019 às 15:25
  • Então, se eu diminuir o drag menor que o mouse ele funciona ? 2/08/2019 às 15:32
  • 1
    beleza valeu ajuda 2/08/2019 às 18:02

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 .