How to drop drag anywhere in the container

Question

How to drop drag anywhere in the container

Asked 4 years, 11 months ago

Viewed 65 times

1

I decided to create an application WEB using user interaction using API Drag And Drop (Drag and drop) of 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>

This code on top is just a small piece of the application that I’m creating, I just put in the necessary code so the code doesn’t get too big, and you don’t waste time visualizing the entire code. But my problem is this: Drag And Drop from the above code works normally, but when you drag(drag) to div with id="drag"and drop(drop) her in div with id="drop" to div#drag stays inside the div#drop in a position left: 0 and top: 0 in relation to your parent container. What I would like is that at the time of dragging the div#drag and release her into the div#drop no matter where you’re dropping the div#drag she will remain in the position where you let go inside the div#drop. Here I quoted some sites that use the Drag And Drop in which the same effect I would like to happen with my application. Material Angular, Scratch.

Leandro, why don’t you use Jquery for this?

– Gleidson Henrique

2019/08/02 at 09:21
Leandro, see if this link helps you. In it has a solution(using jquery) that does what you need: keeps the element where you drop.

– Guto Xavier

2019/08/02 at 13:31
Thanks guys for the help, but is that I am focusing only on JS and would like a solution in just JS.

– Leandro Nascimento

2019/08/02 at 14:58

1 answer

Browser other questions tagged javascript

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

by LeAndrade • **8,475** points · Answer 1 · 2019-08-02T14:59:14+00:00

I made an example being an alternative to your case that might help, not being the most functional way of achieving, because as you can see in the code I setei the specific positions where the element to be dragged will remain after its release. It was the only way I saw to do this, until pq the draggable is not yet very well developed (my view) being quite laborious to apply it, although it has a well defined documentation as can seen here here:

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>