Drag and drop images in my home page

Ask the community
, , ,
1

Question:
I am designing a website on wix studio and I would like my home page have a lot of individuals spreaded images that will allowed be dragged and drop in the home page to change their position and expose other images under them.
It’s the first time I am using velo and also I am a designer working on my code with chat gpt and currently the code is not working but I don’t know why.

Product:
Wix studio

This is the code I added to my home page code :
import wixData from ‘wix-data’;
$w.onReady(function () {
const imageIds = [‘#image1’]; // Example: Update with your actual image IDs
imageIds.forEach(imageId => {
let startPos = { x: 0, y: 0 };
let currentPos = { x: 0, y: 0 };
let dragElement = null;

    $w(imageId).onMouseDown(event => {
        console.log("MouseDown event triggered");
        startPos.x = event.clientX;
        startPos.y = event.clientY;
        currentPos.x = $w(imageId).getBoundingClientRect().left;
        currentPos.y = $w(imageId).getBoundingClientRect().top;
        dragElement = $w(imageId);

        $w("body").onMouseMove(moveDrag);
        $w("body").onMouseUp(() => endDrag(imageId)); // Pass the image ID to endDrag
    });

    function moveDrag(event) {
        console.log("MouseMove event triggered");
        if (!dragElement) return;

        let newPos = {
            x: currentPos.x + (event.clientX - startPos.x),
            y: currentPos.y + (event.clientY - startPos.y)
        };
        dragElement.style.transform = `translate(${newPos.x - currentPos.x}px, ${newPos.y - currentPos.y}px)`;
    }

    function endDrag(imageId) {
        console.log("MouseUp event triggered");
        $w("body").offMouseMove(moveDrag);
        $w("body").offMouseUp(endDrag);
        dragElement = null;
    }
});

});

2

Where did you place your code?

$w("body").offMouseMove(moveDrag);
Where did you find this command ?

What kind of element is → ‘body’ ?

If you are trying to code the HTML-Way → directly communication to the DOM → it is not possible in Wix. You will need to use either a → CUSTOM-ELEMENT, a HTML-Component, or place your code directly into the BODY or HEAD-SECTION (this option can be found on your DASHBORAD, inside settings.).

writing commands like → document.getElementById(‘xxxx’) <— and so on, is not possible in Wix, at least not the direct way, you know it maybe from other systems, frameworks, or whatever.

You can use such coding in JS-Fiddle, or Code-Pen, JS-Bin and others, but not on a wix-site.