js drag and drop 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>

Example 3: javascript drag and drop list

// Code By Webdevtrick ( https://webdevtrick.com )
var btn = document.querySelector('.add');
var remove = document.querySelector('.draggable');
 
function dragStart(e) {
  this.style.opacity = '0.4';
  dragSrcEl = this;
  e.dataTransfer.effectAllowed = 'move';
  e.dataTransfer.setData('text/html', this.innerHTML);
};
 
function dragEnter(e) {
  this.classList.add('over');
}
 
function dragLeave(e) {
  e.stopPropagation();
  this.classList.remove('over');
}
 
function dragOver(e) {
  e.preventDefault();
  e.dataTransfer.dropEffect = 'move';
  return false;
}
 
function dragDrop(e) {
  if (dragSrcEl != this) {
    dragSrcEl.innerHTML = this.innerHTML;
    this.innerHTML = e.dataTransfer.getData('text/html');
  }
  return false;
}
 
function dragEnd(e) {
  var listItens = document.querySelectorAll('.draggable');
  [].forEach.call(listItens, function(item) {
    item.classList.remove('over');
  });
  this.style.opacity = '1';
}
 
function addEventsDragAndDrop(el) {
  el.addEventListener('dragstart', dragStart, false);
  el.addEventListener('dragenter', dragEnter, false);
  el.addEventListener('dragover', dragOver, false);
  el.addEventListener('dragleave', dragLeave, false);
  el.addEventListener('drop', dragDrop, false);
  el.addEventListener('dragend', dragEnd, false);
}
 
var listItens = document.querySelectorAll('.draggable');
[].forEach.call(listItens, function(item) {
  addEventsDragAndDrop(item);
});
 
function addNewItem() {
  var newItem = document.querySelector('.input').value;
  if (newItem != '') {
    document.querySelector('.input').value = '';
    var li = document.createElement('li');
    var attr = document.createAttribute('draggable');
    var ul = document.querySelector('ul');
    li.className = 'draggable';
    attr.value = 'true';
    li.setAttributeNode(attr);
    li.appendChild(document.createTextNode(newItem));
    ul.appendChild(li);
    addEventsDragAndDrop(li);
  }
}
 
btn.addEventListener('click', addNewItem);

Tags:

Misc Example

Recent Posts