<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.draggable-image {
position: absolute;
z-index: 1;
background-color: #f1f1f1;
text-align: center;
border: 1px solid #d3d3d3;
}
.draggable-image .header {
padding: 10px;
cursor: move;
z-index: 2;
background-color: #2196F3;
color: #fff;
}
</style>
</head>
<body>
<div id="container">
<img class="draggable-image" src="https://images.squarespace-cdn.com/content/5d80645df48a56598e1cc054/91cbeb3c-bc85-4577-b601-9337728786f6/lofficiel.jpg?content-type=image%2Fjpeg" style="left: 1300px; top:200px; height: 550px; width: 390px;">
<img class="draggable-image" src="https://images.squarespace-cdn.com/content/5d80645df48a56598e1cc054/6649b9e5-dc0c-4a50-a5e7-d1278cd920ec/HBVN_DELANEY_8.jpg?content-type=image%2Fjpeg" style="left: 900px; top: 200px; height:550px; width:390px;">
<img class="draggable-image" src="https://images.squarespace-cdn.com/content/5d80645df48a56598e1cc054/a6267886-2773-48de-9c70-1e1672c9bc41/elle+cover.jpg?content-type=image%2Fjpeg" style="left: 500px; top:200px; height: 550px; width: 390px;">
<img class="draggable-image" src="https://images.squarespace-cdn.com/content/5d80645df48a56598e1cc054/af11b614-378e-4697-a5dc-199496f8ace2/L1010573.jpg.jpg?content-type=image%2Fjpeg" style="left: 700px; top: 750px; height:550px; width:360px;">
<img class="draggable-image" src="https://images.squarespace-cdn.com/content/5d80645df48a56598e1cc054/7a338d6c-ef34-44ce-9f94-56ce4806d31f/L1010509.jpg.jpg?content-type=image%2Fjpeg" style="left: 1500px; top: 725px; height:400px; width:300px;">
<img class="draggable-image" src="https://images.squarespace-cdn.com/content/5d80645df48a56598e1cc054/e57276c5-7fbf-4bbd-a4cb-a9e1144fcce0/COSBG1221-2.jpg?content-type=image%2Fjpeg" style="left: 1100px; top: 805px; height:380px; width:280px;">
<img class="draggable-image" src="https://images.squarespace-cdn.com/content/5d80645df48a56598e1cc054/4ef54bd1-3c67-44d7-a496-2b26b0cae2d0/ELLE_196_06_Fashion2-3.jpg?content-type=image%2Fjpeg" style="left: 360px; top: 825px; height:400px; width:300px;">
<img class="draggable-image" src="https://images.squarespace-cdn.com/content/5d80645df48a56598e1cc054/f4c1c15a-155e-4b30-97ea-6a3b769321fc/%40EMILPHOTOGRAPHER-2.jpg?content-type=image%2Fjpeg" style="left: 560px; top: 525px; height:400px; width:300px;">
<img class="draggable-image" src="https://images.squarespace-cdn.com/content/5d80645df48a56598e1cc054/e9544032-7ec4-48a8-9b63-d6b870568810/ELLE_196_06_Fashion2-5.jpg?content-type=image%2Fjpeg" style="left: 1700px; top: 325px; height:400px; width:300px;">
<img class="draggable-image" src="https://images.squarespace-cdn.com/content/5d80645df48a56598e1cc054/78918633-07e8-4371-8c30-fbc06ec01ed5/L1010412.jpg.jpg?content-type=image%2Fjpeg" style="left: 1500px; top: 525px; height:350px; width: 250px;">
<img class="draggable-image" src="https://images.squarespace-cdn.com/content/5d80645df48a56598e1cc054/b26b72e2-d7fd-48c0-b34f-37f7a4c69a43/L1010457.jpg.jpg?content-type=image%2Fjpeg" style="left: 1900px; top: 625px; height:350px; width: 250px;">
<img class="draggable-image" src="https://images.squarespace-cdn.com/content/5d80645df48a56598e1cc054/d84cb775-ad7b-433a-88a6-4faf0875cbdd/HBVN_DELANEY_2.jpg?content-type=image%2Fjpeg" style="left: 100px; top: 325px; height:500px; width: 360px;">
<img class="draggable-image" src="https://images.squarespace-cdn.com/content/5d80645df48a56598e1cc054/7d337e25-f570-4bde-8216-d1f0b2e976bd/ELLE_196_06_Fashion2-2.jpg?content-type=image%2Fjpeg" style="left: 800px; top: 450px; height:400px; width: 280px;">
</div>
<script>
//Make the images draggable:
const images = document.getElementsByClassName("draggable-image");
let currentZIndex = 1;
for (let i = 0; i < images.length; i++) {
dragElement(images[i]);
}
function dragElement(elmnt) {
let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
const header = elmnt.querySelector(".header");
if (header) {
/* if present, the header is where you move the element from:*/
header.onmousedown = dragMouseDown;
} else {
/* otherwise, move the element from anywhere inside the element:*/
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;
currentZIndex++;
elmnt.style.zIndex = currentZIndex;
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;
}
}
</script>
</body>
</html>
This is the code I injected into my template for my home page. I'm trying to make it so that it is mobile friendly to where I can drag around all the pictures on a mobile device as well. However I can't see all the pictures as seen below:
Can someone help me out on what to do to make my website more dynamic for mobile devices? Here's a website that's the inspiration for my website: https://misokhe.com/. Notice that it is mobile friendly.