Skip to content

Instantly share code, notes, and snippets.

@supershadoe

supershadoe/tierlist.html

Created October 18, 2024 16:41
Show Gist options
  • Save supershadoe/1ceb1d37ad62fdd993b45fed9f6d9e63 to your computer and use it in GitHub Desktop.
Save supershadoe/1ceb1d37ad62fdd993b45fed9f6d9e63 to your computer and use it in GitHub Desktop.
Download ZIP
Tierlist clone using JS drag-drop API
Raw
tierlist.html
<!DOCTYPE html>
<html>
<head>
<title>Tier list</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Codystar&display=swap" rel="stylesheet">
</head>
<body>
<div id="page">
<div id="content">
<div id="title">TIER LIST</div>
<div id="tier-pool">
<div class="tier-lane">
<div class="lane-type">S</div>
<div class="lane-images"></div>
</div>
<div class="tier-lane">
<div class="lane-type">A</div>
<div class="lane-images"></div>
</div>
<div class="tier-lane">
<div class="lane-type">B</div>
<div class="lane-images"></div>
</div>
<div class="tier-lane">
<div class="lane-type">C</div>
<div class="lane-images"></div>
</div>
<div class="tier-lane">
<div class="lane-type">D</div>
<div class="lane-images"></div>
</div>
<div class="tier-lane">
<div class="lane-type">F</div>
<div class="lane-images"></div>
</div>
</div>
<div id="imgs">
<img id="img-1" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtDi__Mxy0S-v_urxJeBrM9MInyEfpO7o-ltRFie91HA&s">
<img id="img-2" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtDi__Mxy0S-v_urxJeBrM9MInyEfpO7o-ltRFie91HA&s">
<img id="img-3" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtDi__Mxy0S-v_urxJeBrM9MInyEfpO7o-ltRFie91HA&s">
<img id="img-4" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtDi__Mxy0S-v_urxJeBrM9MInyEfpO7o-ltRFie91HA&s">
<img id="img-5" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtDi__Mxy0S-v_urxJeBrM9MInyEfpO7o-ltRFie91HA&s">
<img id="img-6" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtDi__Mxy0S-v_urxJeBrM9MInyEfpO7o-ltRFie91HA&s">
<img id="img-7" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtDi__Mxy0S-v_urxJeBrM9MInyEfpO7o-ltRFie91HA&s">
<img id="img-8" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtDi__Mxy0S-v_urxJeBrM9MInyEfpO7o-ltRFie91HA&s">
</div>
</div>
</div>
<style>
body { padding: 0; margin: 0; }
#page {
display: flex;
justify-content: center;
height: 100vh;
font-family: system-ui;
}
#content {
display: flex;
flex-direction: column;
justify-content: center;
width: 80vw;
max-width: 650px;
gap: 32px;
}
#title {
font-family: 'Codystar', system-ui;
font-weight: bold;
text-align: center;
font-size: 54px;
}
#tier-pool {
border: 1px solid #808080;
border-radius: 12px;
width: 100%;
min-height: 384px;
}
.tier-lane {
display: flex;
border-bottom: 1px dashed #808080;
}
.tier-lane:last-child {
border: none;
}
.tier-lane .lane-type {
padding: 24px;
border-right: 1px solid #808080;
font-family: monospace;
}
.tier-lane .lane-images {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding-left: 4px;
}
.lane-images img {
height: 60px;
padding: 2px 0;
}
#imgs {
border: 1px solid #808080;
border-radius: 12px;
width: 100%;
height: 200px;
padding: 8px;
overflow-y: scroll;
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: left;
box-sizing: border-box;
}
#imgs img {
height: 60px;
}
</style>
<script>
function onDrop(ev) {
ev.preventDefault();
const id = ev.dataTransfer.getData('text');
let target = ev.target;
if (ev.target === undefined) return;
if (ev.target.id !== 'imgs')
target = target.children[1];
target.appendChild(document.getElementById(id));
}
const imgs = document.querySelector('#imgs');
for (const el of imgs.children) {
el.addEventListener('dragstart', ev => {
ev.dataTransfer.setData('text/plain', el.id);
});
}
for (const el of document.querySelectorAll('.tier-lane')) {
el.addEventListener('dragover', ev => ev.preventDefault());
el.addEventListener('drop', onDrop);
}
imgs.addEventListener('dragover', ev => ev.preventDefault());
imgs.addEventListener('drop', onDrop);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment