I want to create a container that contains several small boxes inside. The boxes can be moved inside the container, but they cannot be removed from it. Small boxes are placed next to each other and do not collapse. There is a button to add small boxes, which takes the length and width of the box as input and adds it to the container, and also the total length and width of all the small boxes must be less than the length and width of the container, and if when adding Small box, the length or width of the total of small boxes exceeds the length and width of the container, the user will encounter an error. Give me the code in html, css, and javascript.
What I have tried:
This is a simple template for one box in the container, I want to add more boxes inside it till total length and width of all the small boxes are less than the length and width of the container:
<pre><!DOCTYPE html>
<html>
<head>
<style>
#container {
position: absolute;
background-color: blue;
}
#elem {
position: absolute;
background-color: green;
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
-ms-user-select: none;
-khtml-user-select: none;
user-select: none;
}
</style>
<script>
var mydragg = (function () {
return {
move: function (divid, xpos, ypos) {
divid.style.left = xpos + "px";
divid.style.top = ypos + "px";
},
startMoving: function (divid, container, evt) {
evt = evt || window.event;
var posX = evt.clientX,
posY = evt.clientY,
divTop = divid.style.top,
divLeft = divid.style.left,
eWi = parseInt(divid.style.width),
eHe = parseInt(divid.style.height),
cWi = parseInt(
document.getElementById(container).style.width
),
cHe = parseInt(
document.getElementById(container).style.height
);
document.getElementById(container).style.cursor =
"move";
divTop = divTop.replace("px", "");
divLeft = divLeft.replace("px", "");
var diffX = posX - divLeft,
diffY = posY - divTop;
document.onmousemove = function (evt) {
evt = evt || window.event;
var posX = evt.clientX,
posY = evt.clientY,
aX = posX - diffX,
aY = posY - diffY;
if (aX < 0) aX = 0;
if (aY < 0) aY = 0;
if (aX + eWi > cWi) aX = cWi - eWi;
if (aY + eHe > cHe) aY = cHe - eHe;
mydragg.move(divid, aX, aY);
};
},
stopMoving: function (container) {
var a = document.createElement("script");
document.getElementById(container).style.cursor =
"default";
document.onmousemove = function () {};
},
};
})();
</script>
</head>
<body>
<div
id="container"
style="width: 600px; height: 400px; top: 50px; left: 50px"
>
<div
id="elem"
onmousedown='mydragg.startMoving(this,"container",event);'
onmouseup='mydragg.stopMoving("container");'
style="width: 200px; height: 100px"
>
<div style="width: 100%; height: 100%; padding: 10px"></div>
</div>
</div>
</body>
</html>
Submit an article or tip