This is my first time asking.
I have created a test page where I can recreate the windows theme. Is there any way I can produce the same results without using hundreds of divs on my html?
So basically, the use case of the divs is to make the folder icons draggable. Just like in a chess or windows.
Here's my screenshot:
Here's my html code:
<!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>My Portfolio</title>
<link rel="stylesheet" href="./public/css/main.css">
<script src="https://kit.fontawesome.com/36a7a715d0.js" crossorigin="anonymous"></script>
<script src="./index.js" defer></script>
</head>
<body>
<main id="board">
<div data-cell>
<div draggable="true">
<input type="radio" name="folder" id="folder1">
<label for="folder1"><img src="./public/media/What-is-PerfLogs-folder-in-Windows-10.png" width="60px"></label>
</div>
</div>
<div data-cell>
<div draggable="true">
<input type="radio" name="folder" id="folder2">
<label for="folder2"><img src="./public/media/What-is-PerfLogs-folder-in-Windows-10.png" width="60px"></label>
</div>
</div>
<div data-cell>
<div draggable="true">
<input type="radio" name="folder" id="folder3">
<label for="folder3"><img src="./public/media/What-is-PerfLogs-folder-in-Windows-10.png" width="60px"></label>
</div>
</div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
<div data-cell></div>
</main>
<footer >
<div>
<i details="Start" ></i>
</div>
<div>
<i details="Speakers: 100%" ></i>
<i details="Junmarkwifi" ></i>
<i details="New notifications" ></i>
</div>
</footer>
</body>
</html>CodePudding user response：
Use Canvas.
That was you will take care of everything through JavaScript and would not need to create so many divs.
CodePudding user response：
I dont know if this can help y or not here the code
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/[email protected]/konva.min.js"></script>
<meta charset="utf-8" />
<title>Konva Drag and Drop Demo</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
var width = window.innerWidth;
var height = window.innerHeight;
var stage = new Konva.Stage({
container: 'container',
width: width,
height: height,
});
var layer = new Konva.Layer();
var rectX = stage.width() / 2 - 50;
var rectY = stage.height() / 2 - 25;
var box = new Konva.Rect({
x: rectX,
y: rectY,
width: 100,
height: 50,
fill: '#00D2FF',
stroke: 'black',
strokeWidth: 4,
draggable: true,
});
// add cursor styling
box.on('mouseover', function () {
document.body.style.cursor = 'pointer';
});
box.on('mouseout', function () {
document.body.style.cursor = 'default';
});
layer.add(box);
stage.add(layer);
</script>
</body>
</html>