diff --git a/web-dev/dragdrop/dragdrop.css b/web-dev/dragdrop/dragdrop.css
new file mode 100644
index 00000000..4344b4c5
--- /dev/null
+++ 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
new file mode 100644
index 00000000..75d629de
--- /dev/null
+++ b/web-dev/dragdrop/dragdrop.html
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+
+
+ drag drop
+
+
+
+ Drag and Drop
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web-dev/dragdrop/dragdrop.js b/web-dev/dragdrop/dragdrop.js
new file mode 100644
index 00000000..f3cd3d0e
--- /dev/null
+++ 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);
+ });
+}
\ No newline at end of file
diff --git a/web-dev/dragdrop/pic.jpg b/web-dev/dragdrop/pic.jpg
new file mode 100644
index 00000000..bee3df58
Binary files /dev/null and b/web-dev/dragdrop/pic.jpg differ