הזזת אובייקטים על גבי הדף

RiU ‏ • 13 באוגוסט, 2002

במאמר זה נשתמש ב- DHTML, זוהי בעצם לא שפה אלה שילוב של כמה שפות שכולנו מכירים, HTML, JavaScript ו CSS .
מה שנעשה בעצם זה ניקח תמונה בקודם HTML פשוט נגדיר את המיקום שלה בעזרת CSS ונשנה אותו על פי העכבר בעזרת JavaScript, ידע בסיסי בכל השפות האלו יעזור להבין את המאמר וליישם אותו, אני אשתדל להסביר כמה שיותר ברור שכל אחד יוכל להבין.

את הקובץ פותחים בדרך הרגילה:

1
2   <html>
<head>

פה נכנס CSS:

1
2
3
4
5
6   <style>
    img
    {
     position:relative;
    }
</style>

הגדרנו שמיקום של כל התמונות בקובץ יהיה יחסי למסמך, יש גם אפשרות של מיקום אבסולטי על המסך על זה אני ירחיב במדריך.
עכשיו ניגש לפונקציה ב JavaScript שבודקת האם זאת התמונה שאנחנו רוצים להוזיז ואם כן אז היא מכניסה ערך חיובי למשתנה שבודק אם זאת התמונה, בודקת את המיקום העכבר על ציר ה-X וציר ה-Y, בודקת את המיקום היחסי של התמונה במסמך ומעבירה את הנתונים הלאה, ככה היא נראת:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16   <Script Language="JavaScript">
function setLocation()
{
    if (event.srcElement.id=="moveMe") //check if the image id is "moveMe"
     {
         mouseover=true; 
         /*Notice this line, you will see why its there 
                  later on.*/
         leftpix=moveMe.style.pixelLeft;
         toppix=moveMe.style.pixelTop;
         xcoor=event.clientX;
         ycoor=event.clientY;
         document.onmousemove=moveImage; 
             //call the function moveImage
     }
}

בפונקציה הבאה אם העכבר מעל התמונה הרצויה ואם לחצו על הלחצן השמאלי, כלומר אפשר להזיז את התמונה עם הלחצן השמאלי ברגע שלוחצים עליה בלבד אחרי זה נבדוק את המיקום של העכבר נמצא את המיקום לפי היחס למסמך נקבע אותו ונשאיר אותה שם:

1
2
3
4
5
6
7
8
9
10
11   function moveImage() 
{
    if (mouseover && event.button==1)
    { 
     moveMe.style.pixelLeft=leftpix+event.clientX–xcoor 
        // המיקום האופקי 
     moveMe.style.pixelTop=toppix+event.clientY–ycoor        
        // המיקום האנכי
     return false
    }
}

עכשיו כמובן ניצור פונקציה שמפסיקה הכל ברגע שכפתור העכבר נעזב:

1
2
3
4
5
6   function mouseup()
{
    mouseover=false 
    /* remember this one? if you don't look at the 
    first function and the if in the second function. */
}

עכשיו בעזרת אובייקט ה- document של DHTML בכל לחיצה נקרא לפונקציה שבודקת את המיקום של התמונה ואחרי זה קוראת לפונקציה שמשנה את המיקום של התמונה לפי העכבר:

1   document.onmousedown=setLocation;

וכמובן בעזרת אותו אובייקט נעשה שברגע שיעזב העכבר נקרא לפונקציה שעוצרת את שינוי המיקום של התמונה:

1   document.onmouseup=mouseup;

עככשיו נסגור את חלק הסקריפט ואחרי גם את חלק ה- HEAD של המסמך, ואז יכנס חלק ה-BODY בו נגדיר את התמונה את ה ID שלה את המקור שלה גודל וכל דבר אחר שנרצה נכתוב מה שנרצה במסמך נסגור אותו וזהו, זה החלק האחרון במסמך:

1
2
3
4
5
6
7   </script>
</head>
<body>
    <img id="moveMe" src="myImg.jpg" width="32" height="32"><br>
    <strong>Move me around!</strong> 
</body>
</html>

הקוד במלואו:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58   <html>
<head>
<style>
img
{
position:relative;
}
</style>

<Script Language="JavaScript">
function setLocation()
{
    if (event.srcElement.id=="moveMe") 
        //check if the image id is "moveMe"
     {
         mouseover=true; 
            /*Notice this line, you will see why 
            its there later on.*/
         leftpix=moveMe.style.pixelLeft;
         toppix=moveMe.style.pixelTop;
         xcoor=event.clientX;
         ycoor=event.clientY;
         document.onmousemove=moveImage; 
            //call the function moveImage
     }
}


function moveImage() 
{
    if (mouseover && event.button==1)
    { 
     moveMe.style.pixelLeft=leftpix+event.clientX–xcoor 
        // המיקום האופקי 
     moveMe.style.pixelTop=toppix+event.clientY–ycoor        
        // המיקום האנכי
     return false
    }
}


function mouseup()
{
    mouseover=false 
    /* remember this one? if you don't look at the 
    first function and the if in the second function. */
}

document.onmousedown=setLocation;
document.onmouseup=mouseup;

</script>
</head>
<body>
    <img id="moveMe" src="noscript.jpg" width="32" height="32"><br>
    <strong>Move me around!</strong> 
</body>
</html>

להרצת הדוגמא

עכשיו נסו לשפר את הסקריפט, לעשות אותו מתאים לכמה תמונות, עם לינקים אפילו (אגב לא צריך לינק ב HTML אפשר לעשות בדאבל קליק שישנה את הכתובת) יש עוד הרבה רעיונות יפים ומקוריים שתוכלו ליישם באתר שלכם, מקווה שהצלחתי לעזור :).

תגיות: JS, position, מיקום, תזוזה

הזזת אובייקטים על גבי הדף

הקוד במלואו:

עוד בנושא זה

תגובות בפייסבוק

תגיות