how to drag and drop in javascript code example

Example 1: javascript mouse drag coordinates

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" 
        content="width=device-width, 
        initial-scale=1.0, 
        user-scalable=no" />
  <title>Drag/Drop/Bounce</title>
  <style>
    #container {
      width: 100%;
      height: 400px;
      background-color: #333;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border-radius: 7px;
      touch-action: none;
    }
    #item {
      width: 100px;
      height: 100px;
      background-color: rgb(245, 230, 99);
      border: 10px solid rgba(136, 136, 136, .5);
      border-radius: 50%;
      touch-action: none;
      user-select: none;
    }
    #item:active {
      background-color: rgba(168, 218, 220, 1.00);
    }
    #item:hover {
      cursor: pointer;
      border-width: 20px;
    }
  </style>
</head>

<body>

  <div id="outerContainer">
    <div id="container">
      <div id="item">

      </div>
    </div>
  </div>

  <script>
    var dragItem = document.querySelector("#item");
    var container = document.querySelector("#container");

    var active = false;
    var currentX;
    var currentY;
    var initialX;
    var initialY;
    var xOffset = 0;
    var yOffset = 0;

    container.addEventListener("touchstart", dragStart, false);
    container.addEventListener("touchend", dragEnd, false);
    container.addEventListener("touchmove", drag, false);

    container.addEventListener("mousedown", dragStart, false);
    container.addEventListener("mouseup", dragEnd, false);
    container.addEventListener("mousemove", drag, false);

    function dragStart(e) {
      if (e.type === "touchstart") {
        initialX = e.touches[0].clientX - xOffset;
        initialY = e.touches[0].clientY - yOffset;
      } else {
        initialX = e.clientX - xOffset;
        initialY = e.clientY - yOffset;
      }

      if (e.target === dragItem) {
        active = true;
      }
    }

    function dragEnd(e) {
      initialX = currentX;
      initialY = currentY;

      active = false;
    }

    function drag(e) {
      if (active) {
      
        e.preventDefault();
      
        if (e.type === "touchmove") {
          currentX = e.touches[0].clientX - initialX;
          currentY = e.touches[0].clientY - initialY;
        } else {
          currentX = e.clientX - initialX;
          currentY = e.clientY - initialY;
        }

        xOffset = currentX;
        yOffset = currentY;

        setTranslate(currentX, currentY, dragItem);
      }
    }

    function setTranslate(xPos, yPos, el) {
      el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
    }
  </script>
</body>

</html>

Example 2: drag and drop

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DRAG_AND_DROP</title>
    <style>
  	body{
    background-color: aquamarine;
}
.whiteBox{
    height: 250px;
    width: 250px;
    background-color: rgb(55, 238, 245);
    margin: 10px;
    display: inline-block;
    border: 2px solid red;
}
.imgBox{

    display: flex;
    background-image: url("image.jpg");
    height: 230px;
    width: 230px;
    position: relative;
    top: 10px;
    margin:0 auto;
    cursor: pointer;

}
.imgBox1{

    display: flex;
    background-image: url("image.jpg");
    height: 230px;
    width: 230px;
    position: relative;
    top: 10px;
    margin:0 auto;
    cursor: pointer;

}
.hold{
    border: 2px dashed rgb(118, 182, 0);
}
.hide{
    display: none;
}
.dragenter{
    background: rgb(221, 115, 96);
    border-color: green;
    border-style: groove;
}
  	</style>
</head>
<body>
    <div class="whiteBox">
        <div class="imgBox" draggable="true"></div>
    </div>
    <div class="whiteBox"></div>
    <div class="whiteBox"></div>
    <div class="whiteBox"></div>
    <script>
  	console.log("D&D");

let imgBox = document.querySelector(".imgBox");
let whiteBoxes = document.querySelectorAll(".whiteBox");

imgBox.addEventListener("dragstart", (e) => {
  console.log("DRAG STARTED");
  e.target.className += " hold";
  setTimeout(() => {
    e.target.className += " hide";
  }, 0);
});
imgBox.addEventListener("dragend", (e) => {
  console.log("DRAG ENDED");
  e.target.className = "imgBox";
});

for (whiteBox of whiteBoxes) {
  whiteBox.addEventListener("dragover", (e) => {
    e.preventDefault();
    // console.log("gj")
  });
  whiteBox.addEventListener("dragenter", (e) => {
    e.target.className += " dragenter";
  });
  whiteBox.addEventListener("dragleave", (e) => {
    e.target.className = "whiteBox";
  });
  whiteBox.addEventListener("drop", (e) => {
    let answer= confirm("Do you really want to move it")
    console.log(answer)
    if(answer){
        e.target.append(imgBox)}
        else{
            e.target.className = "whiteBox";
       
    }
  });
}

  	</script>
</body>
</html>

Tags:

Python Example

Recent Posts