<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drag and Drop Menu dengan Submenu</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.2/Sortable.min.js"></script>
<style>
body { font-family: Arial, sans-serif; }
ul { list-style: none; padding: 0; width: 300px; }
li {
padding: 10px;
margin: 5px;
background: #f0f0f0;
cursor: grab;
border: 1px solid #ccc;
}
.submenu {
padding-left: 20px;
}
</style>
</head>
<body>
<h3>Drag & Drop Menu dengan Submenu</h3>
<ul id="menu">
<li>Home</li>
<li>About
<ul class="submenu">
<li>Team</li>
<li>Company</li>
</ul>
</li>
<li>Services
<ul class="submenu">
<li>Web Design</li>
<li>SEO</li>
</ul>
</li>
<li>Contact</li>
</ul>
<script>
new Sortable(document.getElementById("menu"), {
animation: 150,
group: "nested",
fallbackOnBody: true,
swapThreshold: 0.65
});
document.querySelectorAll('.submenu').forEach(sub => {
new Sortable(sub, {
animation: 150,
group: "nested",
fallbackOnBody: true,
swapThreshold: 0.65
});
});
</script>
</body>
</html>
No comments:
Post a Comment