Nasreen Posted March 28, 2023 Share Posted March 28, 2023 <!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. Link to comment
tuanphan Posted April 2, 2023 Share Posted April 2, 2023 Hi, It looks fine to me Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment