עזרה | איך לעשות אפשרות של הזזת תמונה על ידי המשתמש בתוך דף האינטרנט

נ.כ

מצאתי ב"ווב מאסטר" הדרכה איך לעשות אפשרות של הזזת תמונה על ידי המשתמש בתוך דף האינטרנט, מובא שם קוד מלא לזה, וכן יש שם קישור בסוף המדריך להדגמת פונקציה זו.
הבעיה שזה לא עובד לי, לא כשאני מריץ את הקוד שמובא שם, ולא כשאני מריץ את ההדגמה.
אשמח אם מישהו יוכל להסביר לי מה לשנות שם או משהו כזה הקישור כאן.
תודה רבה!

תותחוביץ'

@נ.כ
נראה לי המדריך הזה הוא מאד ישן וכבר לא רלוונטי לדפדפנים העדכניים (כמו איידג' וכרום)

נ.כ

השאלה מה כן אפשר לשנות כדי שיעבוד בדפדפנים החדשים יותר?

cfopuser

@נ.כ תבקש מai הדגמה.

נ.כ

יש לי נט פרי ואין לי אפשרות, אם מישהו יוכל לעשות זאת במקומי, אשמח מאוד.
תודה רבה!

תותחוביץ'

@נ.כ

<!DOCTYPE html>
<html>
<head>
<style>
    #moveMe {
        position: absolute; /* שינוי לאבסולוטי מאפשר תנועה חופשית יותר */
        cursor: move;      /* משנה את סמן העכבר כדי שהמשתמש ידע שאפשר להזיז */
        user-select: none; /* מונע בחירת טקסט בזמן הגרירה */
    }
</style>

<script>
    var mouseover = false;
    var leftpix, toppix, xcoor, ycoor;
    var moveMe;

    // פונקציה שמתחילה את הגרירה
    function setLocation(e) {
        moveMe = document.getElementById("moveMe");
        
        // בדיקה אם לחצו על התמונה הנכונה
        if (e.target.id === "moveMe") {
            mouseover = true;
            
            // שמירת מיקום התמונה הנוכחי (או 0 אם עדיין אין מיקום)
            leftpix = parseInt(moveMe.style.left) || 0;
            toppix = parseInt(moveMe.style.top) || 0;
            
            // שמירת מיקום העכבר ברגע הלחיצה
            xcoor = e.clientX;
            ycoor = e.clientY;
            
            document.onmousemove = moveImage;
        }
    }

    // פונקציה שמחשבת את התנועה
    function moveImage(e) {
        if (mouseover) {
            // חישוב המיקום החדש: מיקום התמונה המקורי + ההפרש בתנועת העכבר
            moveMe.style.left = (leftpix + e.clientX - xcoor) + "px";
            moveMe.style.top = (toppix + e.clientY - ycoor) + "px";
            return false;
        }
    }

    // פונקציה שמפסיקה את הגרירה
    function stopMove() {
        mouseover = false;
        document.onmousemove = null; // מפסיק להאזין לתנועה כדי לחסוך במשאבים
    }

    // חיבור האירועים למסמך
    document.onmousedown = setLocation;
    document.onmouseup = stopMove;
</script>
</head>
<body>
    <img id="moveMe" src="https://via.placeholder.com/100" width="100" height="100" alt="Drag me">
    <br>
    <strong>לחץ וגרור אותי!</strong>
</body>
</html>

נ.כ

תודה רבה ויישר כח עצום!!!