결과
항목을 드래그하여 순서를 변경할 수 있다.
코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.container {
width: 80%;
max-width: 600px;
}
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
list-style-type: none;
padding: 0;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
cursor: move;
user-select: none;
transition: background-color 0.3s;
}
.grid-item:hover {
background-color: #2980b9;
}
.sortable-ghost {
opacity: 0.4;
}
.sortable-chosen {
background-color: #2980b9;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
</style>
</head>
<body>
<div class="container">
<ul id="sortable-grid" class="grid-container">
<li class="grid-item">아이템 1</li>
<li class="grid-item">아이템 2</li>
<li class="grid-item">아이템 3</li>
<li class="grid-item">아이템 4</li>
<li class="grid-item">아이템 5</li>
<li class="grid-item">아이템 6</li>
<li class="grid-item">아이템 7</li>
<li class="grid-item">아이템 8</li>
</ul>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.14.0/Sortable.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var gridContainer = document.getElementById('sortable-grid');
new Sortable(gridContainer, {
animation: 150,
ghostClass: 'sortable-ghost',
chosenClass: 'sortable-chosen',
dragClass: 'sortable-drag',
onEnd: function (evt) {
let items = gridContainer.querySelectorAll('.grid-item');
let newOrder = Array.from(items).map(item => item.textContent);
console.log('새로운 순서:', newOrder);
}
});
});
</script>
</body>
</html>관련페이지
겪은 이슈를 공유합니다.