Both boxes have a display properties so if the display was 'inline-block' then it would only allow me to attach to the side of the box, if the display property was set to 'block' then i can only attach to the bottom or top of the box. I want the user to be able to drag each box and attach it to the box in the area but they are able to decide where to attach to the side or bottom or top. Currently when i drop it, it is being attached to the bottom of the box in the area.
I am using Vanilla JavaScript, CSS and HTML
var dragged;
/* events fired on the draggable target */
document.addEventListener("drag", function(event) {
}, false);
document.addEventListener("dragstart", function(event) {
// store a ref. on the dragged elem
dragged = event.target;
// make it half transparent
event.target.style.opacity = .5;
}, false);
document.addEventListener("dragend", function(event) {
// reset the transparency
event.target.style.opacity = "";
}, false);
/* events fired on the drop targets */
document.addEventListener("dragover", function(event) {
// prevent default to allow drop
event.preventDefault();
}, false);
document.addEventListener("dragenter", function(event) {
// highlight potential drop target when the draggable element enters it
if (event.target.className == "dropzone") {
event.target.style.background = "purple";
}
}, false);
document.addEventListener("dragleave", function(event) {
// reset background of potential drop target when the draggable element leaves it
if (event.target.className == "dropzone") {
event.target.style.background = "";
}
}, false);
document.addEventListener("drop", function(event) {
// prevent default action (open as link for some elements)
event.preventDefault();
// move dragged elem to the selected drop target
if (event.target.className == "dropzone") {
event.target.style.background = "";
dragged.parentNode.removeChild( dragged );
event.target.appendChild( dragged );
}
}, false);body {
/* Prevent the user selecting text in the example */
user-select: none;
}
#draggable {
width: 200px;
height: 20px;
text-align: center;
background: white;
}
#draggable2 {
width: 200px;
height: 20px;
text-align: center;
background: green;
}
.dropzone {
width: 500px;
height: 50px;
background: blueviolet;
margin-bottom: 10px;
padding: 10px;
}<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">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="dropzone">
<div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
This div is draggable
</div>
<div id="draggable2" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
This div is also draggable
</div>
</div>
<div class="dropzone"></div>
<div class="dropzone"></div>
<div class="dropzone"></div>
<script src="main.js"></script>
</body>
</html>