• تعقيب اشاره‌گر :

• براي اين عمليات، ابتدا موقعيت اشاره‌گر را به  دست مي‌آوريم.

 با اين دو دستور (event.clientY - event.clientX) مي‌شود موقعيت اشاره‌گر را گرفت.

• حالا بايد چيزي را كه مي‌خواهيد به دنبال اشاره‌گر، حركت كند مشخص نماييد.

 اين شي مي‌تواند از لحاظ ظاهر، متن يا عكس يا هر چيز ديگر، و از لحاظ محتوا، ثابت يا متغير باشد.

- سه متن بنويسيد؛ يك متن براي حركت عمودي، و يك متن براي حركت افقي، و يكي هم براي حركت كامل.

- هر كدام را داخل يك لايه قرار دهيد.

- لايه‌ها را به اين ترتيب نامگذاري نماييد: (div1 - divY - divX)

- استيل آنها را به اين صورت تعريف كنيد: (style=position: absolute). اين كد، به شي مورد نظر اجازه حركت مي‌دهد.

• كد HTML:

<p><div id="div1" style="position: absolute;">متن</div></p>
<p><div id="divY" style="position: absolute;">عمودي</div></p>
<p><div id="divX" style="position: absolute;">افقي</div></p>

• كد JavaScript:

function cursorPos() // تابع
{
// حركت عمودي و افقي
div1.style.top = event.clientY;
div1.style.left = event.clientX;
// حركت عمودي
divY.style.top = event.clientY;
// حركت افقي
divX.style.left = event.clientX;
}
document.onmousemove=cursorPos;

حركت دادن اشياء :

• مراحل عمليات:

- ساختن شي مورد نظر
- به دست آوردن موقعيت اشاره‌گر
- به دست آوردن موقعيت شي مورد نظر
- تعريف كردن رويداد كليك و كشيدن

• شيئي كه براي اين كار در نظر گرفته‌ام، يك جدول است كه شبيه كادرهاي محاوره‌اي در ويندوز مي‌باشد.

 
- اين جدول، داراي دو سلول است. سلول اول، براي عنوان كادر و محل كشيدن و جابجايي، و سلول پايين، محل نوشته محتوي است.

- داخل سلول اول، يك لايه (div) قرار داده‌ام به نام (moveMe1). جدول را هم (moveMe)، نامگذاري نموده‌ام.

- استيل جدول را به اين صورت تعريف كنيد: (style=position: relative). اين كد، به شي مورد نظر اجازه حركت مي‌دهد.

• كد HTML:

<table id="moveMe" style="position: relative;" border="0" width="200" bgcolor="#FBF9FB">
<tr>
<td bgcolor="#F6F4F6" align="center">
<div id="moveMe1">&nbsp;</div></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table>

• كد JavaScript:

mouseover = true
function coordinates()
{
if (!moveMe)
{
return
}
if (event.srcElement.id == "moveMe1")
{
mouseover = true
// موقعيت جدول
pleft = moveMe.style.pixelLeft
ptop = moveMe.style.pixelTop
// موقعيت اشاره‌گر
xcoor = event.clientX
ycoor = event.clientY
document.onmousemove = funmove
}
}
function funmove()
{
if (mouseover && event.button == 1) // اگر كليك چپ شد
{
moveMe.style.pixelLeft = pleft + event.clientX-xcoor
moveMe.style.pixelTop = ptop + event.clientY-ycoor
moveMe1.style.cursor = "move"; // تغيير شكل اشاره‌گر
moveMe.style.filter = "alpha(opacity=50)"; // استفاده از فيلتر آلفا
return false
}
}
function mouseup()
{
moveMe1.style.cursor = ""; // شكل عادي اشاره‌گر
moveMe.style.filter = "alpha(opacity=100)"; // از كار انداختن فيلتر آلفا
mouseover = false
}
document.onmousedown=coordinates
document.onmouseup=mouseup
 

• شرح كد:
- moveMe1.style.cursor = move = در جلسه 17، خوانديم كه شكل اشاره‌گر، قابل تغيير است. در اينجا، شكل "حركت" را انتخاب مي‌كنيم.

-  event.button == 1 = در جلسه 17، ديده شد كه كد كليك چپ، 1 است.

 با به دست آوردن اين كد، مي‌فهميم كه موس، در حالت كليك باقي مانده؛ يعني همان كشيدن به وسيله موس.

- moveMe.style.filter = "alpha(opacity=50)" = به وسيله اين كد، كه از زبان HTML است،

 به جدول خود، فيلتر آلفا، يا همان كمرنگ شدن در حالت جابجايي مي‌دهيم.