I have tried putting meta tags and nothing makes the code draggable I want the text blocks and image blocks to be draggable on iPad and smart phone, what should i do to make it work?
The idea is to drag the photos under the word and vice-versa but literally nothing moves on the phone and I am having the same issue with other pieces of code for the same project so there must be a general solution right?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- Ensure proper scaling on iPad/iPhone and prevent zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes"> <!-- Enable full-screen mode on iOS -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<!-- Status bar style for iOS apps -->
<meta name="apple-mobile-web-app-title" content="Draggable Items"> <!-- App title for iOS homescreen -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Random Draggable Items</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #f0f0f0;
overflow: hidden;
font-family: 'Helvetica', sans-serif;
}
#container {
position: relative;
width: 100vw;
height: 100vh;
background-color: #e0e0e0;
display: flex;
justify-content: center;
align-items: center;
}
.draggable-item {
position: absolute;
cursor: move;
}
.draggable-image {
width: 250px;
height: 400px;
object-fit: cover;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border-radius: 8px;
border: 1px solid #ccc;
}
.draggable-text {
padding: 10px;
font-size: 14px;
text-align: center;
background-color: #000000;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border-radius: 8px;
border: 1px solid #ccc;
width: 150px;
color: white;
z-index: 10;
}
/* Mobile adjustments */
@media (max-width: 768px) {
.draggable-image {
width: 180px;
height: 288px;
/* Maintain proportionality */
}
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function () {
const items = [
{ imageSrc: ".jpg", text: "Frêle" },
{ imageSrc: ".jpg", text: "Charmant.e" },
{ imageSrc: ".jpg", text: "Inspirant.e" },
{ imageSrc: ".jpg", text: "Sportif.ve" },
{ imageSrc: ".jpg", text: "Stylé.e" },
{ imageSrc: ".jpg", text: "Mystérieux.se" },
{ imageSrc: ".jpg", text: "Galbé.e" },
{ text: "Frais. fraîche" },
{ text: "Mince" },
{ text: "Séduisant.e" },
{ text: "Sophistiqué.e" },
{ text: "Solaire" },
{ text: "Pulpeux.se" },
{ text: "Attirant.e" },
{ text: "Rebelle" },
{ text: "Classe" }
];
const container = document.getElementById("container");
items.forEach(item => {
if (item.imageSrc) {
// Create draggable image
const imgElement = document.createElement("img");
imgElement.classList.add("draggable-item", "draggable-image");
imgElement.src = item.imageSrc;
randomizePosition(imgElement);
container.appendChild(imgElement);
makeDraggable(imgElement);
}
if (item.text) {
// Create draggable text
const textElement = document.createElement("div");
textElement.classList.add("draggable-item", "draggable-text");
textElement.textContent = item.text;
randomizePosition(textElement);
container.appendChild(textElement);
makeDraggable(textElement);
}
});
function randomizePosition(element) {
const padding = 0.07; // 7% padding around the container
const minX = container.offsetWidth * padding;
const maxX = container.offsetWidth * (1 - padding) - element.offsetWidth;
const minY = container.offsetHeight * padding;
const maxY = container.offsetHeight * (1 - padding) - element.offsetHeight;
const randomX = Math.random() * (maxX - minX) + minX;
const randomY = Math.random() * (maxY - minY) + minY;
element.style.left = `${randomX}px`;
element.style.top = `${randomY}px`;
}
function makeDraggable(element) {
let isTouchDevice = "ontouchstart" in window;
let shiftX, shiftY;
function moveAt(pageX, pageY) {
let newX = Math.max(0, Math.min(pageX - shiftX, container.offsetWidth - element.offsetWidth));
let newY = Math.max(0, Math.min(pageY - shiftY, container.offsetHeight - element.offsetHeight));
element.style.left = `${newX}px`;
element.style.top = `${newY}px`;
}
function onMouseMove(event) {
moveAt(event.pageX, event.pageY);
}
function onTouchMove(event) {
moveAt(event.touches[0].pageX, event.touches[0].pageY);
}
element.addEventListener(isTouchDevice ? "touchstart" : "mousedown", function (e) {
e.preventDefault();
shiftX = (isTouchDevice ? e.touches[0].clientX : e.clientX) - element.getBoundingClientRect().left;
shiftY = (isTouchDevice ? e.touches[0].clientY : e.clientY) - element.getBoundingClientRect().top;
if (isTouchDevice) {
document.addEventListener("touchmove", onTouchMove);
document.addEventListener("touchend", function () {
document.removeEventListener("touchmove", onTouchMove);
}, { once: true });
} else {
document.addEventListener("mousemove", onMouseMove);
document.addEventListener("mouseup", function () {
document.removeEventListener("mousemove", onMouseMove);
}, { once: true });
}
});
element.ondragstart = function () {
return false;
};
}
});
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>