Advertisement:
Read Later
In this tutorial, I will show you how to create a draggable social media links navigator menu for your blog or website in HTML, CSS, and JavaScript. Also, you can utilize this method to develop interactive advertisement pages for your website.
This tutorial is an iteration of this project on w3schools.com.
In JavaScript:
Initial the dragElement function wiht the menu element.
Define the dragElement function.
Using the onmousedown event, activate the dragMouseDown function when the anchor is clicked.
Define the dragMouseDown function.
Get the mouse cursor position at startup.
Using the onmouseup event, activate the closeDragElement function.
Call the elementDrag function whenever the cursor moves.
Define the elementDrag function.
Calculate the current cursor position using the previous cursor position.
Set the element's new position according to the current cursor position.
Define the closeDragElement function.
Stop moving when mouse button is released.
In CSS:
Style the anchor and the menu HTML elements.
Set the menu's position as absolute.
Define the z-index paramater.
------------------- JavaScript --------------------
dragElement(document.getElementById("menu"));
function dragElement(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById("anchor")) {
// if present, the header is where you move the DIV from:
document.getElementById("anchor").onmousedown = dragMouseDown;
} else {
// otherwise, move the DIV from anywhere inside the DIV:
elmnt.onmousedown = dragMouseDown;
}
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
// get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
// calculate the new cursor position:
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// set the element's new position:
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}
function closeDragElement() {
// stop moving when mouse button is released:
document.onmouseup = null;
document.onmousemove = null;
}
}
------------------- CSS --------------------
#menu {
position: absolute;
z-index: 10;
background-color: #ff5c33;
border: 5px solid white;
text-align: center;
width: 200px;
}
#menu p:hover, #anchor p {
color: #002699;
font-weight:bold;
}
#anchor {
padding: 10px;
cursor: move;
z-index: 11;
background-color: lightblue;
color: white;
}
------------------- HTML --------------------
<div id="menu">
<div id="anchor"><p>Social Media:</p></div>
<a href="https://twitter.com/ThAmplituhedron"><p><i class="fab fa-twitter"></i></p></a>
<a href="https://www.instagram.com/theamplituhedron/"><p><i class="fab fa-instagram"></i></p></a>
<a href="https://www.linkedin.com/in/kutluhan-aktar-a3739618a/"><p><i class="fab fa-linkedin-in"></i></p></a>
</div>
Result:
(*) https://www.w3schools.com/howto/howto_js_draggable.asp