drag and drop
<!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="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69">
</body>
</html> 
<!DOCTYPE HTML>
<html>
<head>
<style>
#div1, #div2 {
float: left;
width: 100px;
height: 35px;
margin: 10px;
padding: 10px;
border: 1px solid black;
}
</style>
<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>
<h2>Drag and Drop</h2>
<p>Drag the image back and forth between the two div elements.</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="img_w3slogo.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>
<!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>
