drag and drop js code example

Example 1: 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>

Example 2: js draggable

<script>
  var dragged;

  /* events fired on the draggable target */
  document.addEventListener("drag", function(event) {

  }, false);

  document.addEventListener("dragstart", function(event) {
    // store a ref. on the dragged elem
    dragged = event.target;
    // make it half transparent
    event.target.style.opacity = .5;
  }, false);

  document.addEventListener("dragend", function(event) {
    // reset the transparency
    event.target.style.opacity = "";
  }, false);

  /* events fired on the drop targets */
  document.addEventListener("dragover", function(event) {
    // prevent default to allow drop
    event.preventDefault();
  }, false);

  document.addEventListener("dragenter", function(event) {
    // highlight potential drop target when the draggable element enters it
    if (event.target.className == "dropzone") {
      event.target.style.background = "purple";
    }

  }, false);

  document.addEventListener("dragleave", function(event) {
    // reset background of potential drop target when the draggable element leaves it
    if (event.target.className == "dropzone") {
      event.target.style.background = "";
    }

  }, false);

  document.addEventListener("drop", function(event) {
    // prevent default action (open as link for some elements)
    event.preventDefault();
    // move dragged elem to the selected drop target
    if (event.target.className == "dropzone") {
      event.target.style.background = "";
      dragged.parentNode.removeChild( dragged );
      event.target.appendChild( dragged );
    }
  }, false);

</script>

Tags:

Misc Example

Recent Posts