javascript drag and drop example

2

drag and drop html

<!DOCTYPE HTML>
<html>
   <head>
   <script>
function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}
   </script>
   </head>
<body>

   <div id="box" ondrop="drop(event)"
   ondragover="allowDrop(event)"
   style="border:1px solid black; 
   width:200px; height:200px"></div>

   <img id="image" src="sample.jpg" draggable="true"
   ondragstart="drag(event)" width="150" height="50" alt="" />

</body>
</html>

Posted by: Guest on June-09-2021

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>

Posted by: Guest on September-14-2020

0

drag and drop html

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}

Posted by: Guest on June-09-2021

0

drag and drop html

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

Posted by: Guest on June-09-2021

-1

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);

Posted by: Guest on January-09-2021

Source

2

drag and drop html

<!DOCTYPE HTML>
<html>
   <head>
   <script>
function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}
   </script>
   </head>
<body>

   <div id="box" ondrop="drop(event)"
   ondragover="allowDrop(event)"
   style="border:1px solid black; 
   width:200px; height:200px"></div>

   <img id="image" src="sample.jpg" draggable="true"
   ondragstart="drag(event)" width="150" height="50" alt="" />

</body>
</html>

Posted by: Guest on June-09-2021

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>

Posted by: Guest on September-14-2020

0

drag and drop html

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}

Posted by: Guest on June-09-2021

0

drag and drop html

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

Posted by: Guest on June-09-2021

-1

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);

Posted by: Guest on January-09-2021

Source

Answers for "javascript drag and drop example"

Code answers related to "javascript drag and drop example"

Code answers related to "Html"

Browse Popular Code Answers by Language

Popular Programming Languages

Advertisements

Company

Compilers

Help

Connect with us