dikshantrajput · Ankit9126 · Oct 28, 2022
diff --git a/web-dev/dragdrop/dragdrop.css b/web-dev/dragdrop/dragdrop.css
@@ -0,0 +1,37 @@
+.head{
+  text-align: center;
+  color:aliceblue;
+  ;
+
+}
+.whitebox {
+  display: inline-block;
+  width:300px;
+  height: 300px;
+  background-color: azure;
+  margin: 10px;
+  margin-top:25px;
+  border: 3px solid black;
+}
+body {
+  background-color: rgb(199, 86, 21);
+}
+.imgbox { 
+    background-image: url('pic.jpg');
+  width: 290px;
+  top :4px;
+  left:6px;
+  height: 290px;
+  position: relative;
+  cursor: pointer;
+}
+.hold{
+    border: 4px solid red;
+}
+.hide{
+    display: none;
+}
+.dashed{
+    border:dashed;
+    background: rgb(224, 156, 66);
+}
diff --git a/web-dev/dragdrop/dragdrop.html b/web-dev/dragdrop/dragdrop.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <link rel="stylesheet" href="dragdrop.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>drag drop</title>
+</head>
+
+<body>  
+    <h2 class="head">Drag and Drop</h2><hr>
+    <div class="whitebox">
+        <div class="imgbox" draggable="true"></div>
+    </div>
+    <div class="whitebox"></div>
+    <div class="whitebox"></div>
+    <div class="whitebox"></div>
+
+  <hr>
+    <script src="dragdrop.js"></script>
+</body>
+
+</html>
diff --git a/web-dev/dragdrop/dragdrop.js b/web-dev/dragdrop/dragdrop.js
@@ -0,0 +1,29 @@
+const imgbox = document.querySelector(".imgbox");
+const whiteboxes = document.getElementsByClassName("whitebox");
+
+imgbox.addEventListener('dragstart', (e) => {
+    e.target.className += ' hold';
+    setTimeout(() => {
+        e.target.className = 'hide';
+    }, 0);
+
+});
+
+imgbox.addEventListener('dragend', (e) => {
+    e.target.className = 'imgbox';
+});
+for (let whitebox of whiteboxes) {
+
+    whitebox.addEventListener('dragover', (e) => {
+        e.preventDefault();
+    });
+    whitebox.addEventListener('dragenter', (e) => {
+e.target.className+=' dashed';
+    });
+    whitebox.addEventListener('dragleave', (e) => {
+e.target.className='whitebox';
+    });
+    whitebox.addEventListener('drop', (e) => {
+        e.target.append(imgbox);
+    });
+}
diff --git a/web-dev/dragdrop/pic.jpg b/web-dev/dragdrop/pic.jpg