Get A Drag & Drop Menu Program By This Source Code
HTML Code :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drag & Drop Element</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.10.2/Sortable.min.js"></script>
</head>
<body>
<div class="wrapper">
<div class="item">
<span class="text"><a href="https://programming387.blogspot.com/"><button><font size=6>Home</font></button></a></span>
<i class="fas fa-bars"></i>
</div>
<div class="item">
<span class="text"><a href="https://programming387.blogspot.com/p/about.html"><button><font size=6>About Us</font></button></a></span>
<i class="fas fa-bars"></i>
</div>
<div class="item">
<span class="text"><a href="https://programming387.blogspot.com/p/contact-us.html"><button><font size=6>Contact Us</font></button></a></span>
<i class="fas fa-bars"></i>
</div>
<div class="item">
<span class="text"><a href="https://programming387.blogspot.com/p/privacy-policy.html"><button><font size=6>Privacy Policy</font></button></a></span>
<i class="fas fa-bars"></i>
</div>
<div class="item">
<span class="text"><a href="https://programming387.blogspot.com/p/dmca.html"><button><font size=6>DMCA</font></button></a></span>
<i class="fas fa-bars"></i>
</div>
</div>
<script>
const dragArea = document.querySelector(".wrapper");
new Sortable(dragArea, {
animation: 350
});
</script>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'harlow solid';
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: linear-gradient(to bottom right,#dd29ac,#158af4,#f29075);
padding: 20px;
}
.wrapper{
background: transparent;
padding: 25px;
max-width: 550px;
width: 100%;
border-radius: 3px;
box-shadow: 0px 10px 15px rgba(0,0,0,0.1);
}
.wrapper .item{
color: #000;
display: flex;
margin-bottom: 8px;
padding: 12px 17px;
background: #f9e227;
border-radius: 3px;
align-items: center;
justify-content: space-between;
}
.wrapper .item:last-child{
margin-bottom: 0px;
}
.wrapper .item .text{
font-size: 25px;
font-weight: 500;
}
.wrapper .item i{
font-size: 25px;
cursor: pointer;
}
OUTPUT Screen
Posts
37 Comments
Wonderful
ReplyDeleteExcellent
ReplyDeleteBrilliant
ReplyDeleteAwesome
ReplyDeleteVery Nice
ReplyDeleteWow
ReplyDeleteExcellent
ReplyDeleteAwesome
ReplyDeleteAmazing Guys
ReplyDeleteNice Work
ReplyDeleteSuper Work
ReplyDeleteWonderful
ReplyDeletePerfect 👌
ReplyDeleteAwesome program
ReplyDeleteWonderful
ReplyDeletePerfect 👌
ReplyDeletePerfect 👌
ReplyDeleteBrilliant
ReplyDeleteMind blowing
ReplyDeleteWow Wonderful
ReplyDeleteAmazing
ReplyDeletePerfect 👌
ReplyDeleteWonderful
ReplyDeletePerfect 👌
Perfect 👌
ReplyDeletefantastic
ReplyDeleteBrilliant
ReplyDeletePerfect 👌
ReplyDeleteAmazing
ReplyDeleteAwesome
ReplyDeleteExcellent
ReplyDeleteFabulous
ReplyDeleteSuper
ReplyDeleteSuperb
ReplyDeletePerfect
ReplyDeleteBrilliant
ReplyDeletePerfect 👌
ReplyDeleteVery Interesting
ReplyDelete