Below is the HTML/JS code snippet:
<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
this.style.opacity = '0.4';
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<!--Create Left Panel-->
<div id="leftPanel" class="container-left">
<!--Create subpanel for each data (submenus) and add initial divs (elements)-->
<div id="panelEntrada" class="container-left-entrada" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="draggable1" class="capaEntrada" draggable="true" ondragstart="drag(event)"></div>
</div>
<div id="panelOculta" class="container-left-oculta" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="draggable2" class="capaOculta" draggable="true" ondragstart="drag(event)"></div>
</div>
<div id="panelSalida" class="container-left-salida" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="draggable3" class="capaSalida" draggable="true" ondragstart="drag(event)"></div>
</div>
<!--Divide in 2 sections for each type of activation function-->
<div id="panelActivacion" class="container-left-activation">
<div id="panelSigmoidal" class="container-left-activation-left" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="draggable4" class="funcSigmoidal" draggable="true" ondragstart="drag(event)"></div>
</div>
<div id="panelTanh" class="container-left-activation-right" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="draggable5" class="funcTanh" draggable="true" ondragstart="drag(event)"></div>
</div>
</div>
</div>
<!--container right is all the right area(top, right and area de design)-->
<div class="container-right">
<!--top just the top part-->
<div class="container-top"></div>
<!-- all that's left of the middle part (design y right)-->
<div class="container-bottom">
<div id="bottom" class="container-bottom-left" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="container-bottom-right"></div>
</div>
</div>
</body>
</html>
This combined with another CSS code creates the resulting window shown in the image below: https://i.sstatic.net/9tSSw.png
The small unfilled rectangles on the left side are draggable within all the other rectangles in the left panel (green, black, gray, aqua, and magenta) and can also be moved to the larger green rectangle in the middle. The goal is to keep a fixed number (just one) of each rectangle in its original position while allowing new ones to be added to the design area like a drawer.
Do you have any suggestions on achieving this functionality using only HTML, JS, and CSS?