Positionnement par ancre CSS – ancres multiples
HTML
index.html <button class="open anchor anchor1">Anchor 1</button>
<button class="open anchor anchor2">Anchor 2</button>
<article class="anchor-positioned top-left">
anchor-positioned
</article>
CSS
style.css @layer demo {
.anchor {
position: absolute;
}
.anchor1 {
anchor-name: --anchor1;
}
.anchor2 {
anchor-name: --anchor2;
bottom: 0;
right: 0;
}
.anchor-positioned {
position: absolute;
top: anchor(--anchor1 bottom);
left: anchor(--anchor1 right);
right: anchor(--anchor2 left);
bottom: anchor(--anchor2 top);
display: grid;
place-items: center;
}
}
@layer demoStyles {
body {
display: block;
min-height: auto;
}
*:not(dialog) {
box-sizing: revert;
margin: revert;
padding: revert;
}
.open {
padding: 1rem;
background: orange;
width: 100px;
height: 100px;
border: 1px white dashed;
}
.anchor-positioned {
background-color: rgba(0, 255, 255, 0.8);
padding: 1rem;
position: relative;
border: dashed 1px white;
&::after {
content: "";
position: absolute;
width: 6px;
height: 6px;
border-radius: 100vmax;
background-color: red;
}
&.top-left::after {
top: 0;
left: 0;
transform: translate(-50%, -50%);
}
}
}
JavaScript
script.js // You can choose to have an element with the class "window-top" inside of your draggable window that will act as the "handle" for the window or it will attach to the element itself
function makeDraggable(element) {
// Make an element draggable (or if it has a .window-top class, drag based on the .window-top element)
let currentPosX = 0,
currentPosY = 0,
previousPosX = 0,
previousPosY = 0;
// If there is a window-top classed element, attach to that element instead of full window
if (element.querySelector(".window-top")) {
// If present, the window-top element is where you move the parent element from
element.querySelector(".window-top").onmousedown = dragMouseDown;
} else {
// Otherwise, move the element itself
element.onmousedown = dragMouseDown;
}
function dragMouseDown(e) {
// Prevent any default action on this element (you can remove if you need this element to perform its default action)
e.preventDefault();
// Get the mouse cursor position and set the initial previous positions to begin
previousPosX = e.clientX;
previousPosY = e.clientY;
// When the mouse is let go, call the closing event
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves
document.onmousemove = elementDrag;
}
function elementDrag(e) {
// Prevent any default action on this element (you can remove if you need this element to perform its default action)
e.preventDefault();
// Calculate the new cursor position by using the previous x and y positions of the mouse
currentPosX = previousPosX - e.clientX;
currentPosY = previousPosY - e.clientY;
// Replace the previous positions with the new x and y positions of the mouse
previousPosX = e.clientX;
previousPosY = e.clientY;
// Set the element's new position
element.style.top = element.offsetTop - currentPosY + "px";
element.style.left = element.offsetLeft - currentPosX + "px";
}
function closeDragElement() {
// Stop moving when mouse button is released and release events
document.onmouseup = null;
document.onmousemove = null;
}
}
// Make myWindow and myWindow2 draggable in different ways...
// myWindow will only be able to be moved via the top bar (.window-top element). The main element does nothing on mouse down.
makeDraggable(document.querySelector(".anchor1"));
// myWindow2 will be able to moved by grabbing the entire element
makeDraggable(document.querySelector(".anchor2"));