Nasreen Posted March 28 Share Posted March 28 <!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 Share Posted April 2 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 How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care 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