Let's see how we can implement drag and drop using JavaScript
Set Up
In the HTML file, add the draggable="true" to the element you want to drag and drop.
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://kit.fontawesome.com/833be080c6.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./main.css">
<script defer src="./index.js"></script>
</head>
<body>
<div class="img-box">
<img draggable="true" id="img" src="https://source.unsplash.com/random" alt="" height="100%" width="100%">
</div>
<div class="img-box"></div>
<div class="img-box"></div>
<div class="img-box"></div>
<div class="img-box"></div>
</body>
</html>Add styles
/* main.css */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.img-box {
height: 200px;
width: 200px;
border: solid 3px #000;
border-radius: 50%;
}
img {
object-fit: cover;
object-position: center;
border-radius: 50%;
}Drag and Drop
We can implement the drag-and-drop effect by using events. Below is the list of the events we can use
'dragstart''dragover''dragenter''dragleave''drop'Here is the completed code. Note that by default elements cannot take other elements, so we need to override this behavior using e.preventDefault() to make this work.
// index.js
const boxes = document.querySelectorAll('.img-box')
boxes.forEach(box => {
box.addEventListener('dragstart', (e) => {
e.dataTransfer.setData('img', e.target.id)
reset()
})
box.addEventListener('dragover', (e) => {
e.preventDefault()
box.style.borderStyle = 'dotted';
})
box.addEventListener('dragenter', (e) => {
})
box.addEventListener('dragleave', (e) => {
box.style.borderStyle = 'solid';
})
box.addEventListener('drop', (e) => {
var data = e.dataTransfer.getData('img')
e.target.appendChild(document.getElementById(data))
box.style.borderStyle = 'solid';
})
});
function reset() {
setTimeout(() => {
boxes.forEach(box => {
box.style.borderStyle = 'solid';
});
}, 1000)
}References
HTML Drag and Drop API
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
HTML Drag and Drop API - Web APIs | MDN
HTML Drag and Drop interfaces enable applications to use drag-and-drop features in browsers.
developer.mozilla.org
'Frontend > JavaScript' 카테고리의 다른 글
| NPM - Nodemon (0) | 2023.12.15 |
|---|---|
| Canvas (0) | 2023.07.11 |
| JavaScript Module - Button Ripple Effect (1) | 2023.07.03 |
| NPM - JSON Server (0) | 2023.05.22 |
| JavaScript Module - Text Wave Effect (2) | 2023.04.05 |
