In my HTML I’ve the next code …
There are a number of photos however I’ll simply present one to maintain the code easy.
To make the picture draggable I’m utilizing the next js file …
// Drag and drop performance
const draggableElements = doc.querySelectorAll(‘.draggable’);
const container = doc.getElementById(‘draggable-container’);
draggableElements.forEach((draggableElement) => {
let offsetX, offsetY, isDragging = false;
draggableElement.addEventListener('mousedown', (occasion) => {
occasion.preventDefault(); // Forestall default drag-and-drop conduct
isDragging = true;
offsetX = occasion.clientX - draggableElement.getBoundingClientRect().left;
offsetY = occasion.clientY - draggableElement.getBoundingClientRect().high;
doc.addEventListener('mousemove', handleDrag);
doc.addEventListener('mouseup', () => {
isDragging = false;
doc.removeEventListener('mousemove', handleDrag);
});
});
perform handleDrag(occasion) {
if (!isDragging) return;
const x = occasion.clientX - offsetX - container.getBoundingClientRect().left;
const y = occasion.clientY - offsetY - container.getBoundingClientRect().high;
const maxX = container.clientWidth - draggableElement.clientWidth;
const maxY = container.clientHeight - draggableElement.clientHeight;
// Make sure the picture stays inside the container
const constrainedX = Math.min(Math.max(0, x), maxX);
const constrainedY = Math.min(Math.max(0, y), maxY);
draggableElement.fashion.left = `${constrainedX}px`;
draggableElement.fashion.high = `${constrainedY}px`;
}
});
This works completely on laptops and desktops in each Home windows and Mac for any browser.
Nonetheless it doesn’t work in any respect on cell units (telephones/tablets) both IOS or Android!
Can anybody see what’s incorrect?
Thanks.
On cell units nothing occurs in any respect. On laptops all is OK together with contact screens!!