A mellékelt példában a projekt mappájában található Page alkönyvtár Test.htm állományát töltjük be a TWebBrowser komponensbe, mely tartalmazza a kontrol mozgatásáért felelős kódot.
A kontrolt úgy építettük fel, hogy egy DIV elemben elhelyeztünk két másikat, melyek közül a felső lesz az ablak sávja, melynél fogva az ablak kvázi vonszolható.
A lap betöltődésekor elhelyezzük a kontrolt a lapon úgy, hogy annak pozíciója igazodjon a képernyő hasznos területének méretéhez.
A felső DIV elemben elhelyeztünk egy gombot, melyre kattintva azt a hatást keltjük, mintha az alsó ablak feltolódna, majd megjelenne. Ehhez a gombot tartalmazó kép eseménykezelőjébe a következő sorokat illesztettük:
function doImgShow()
{
if (panelmain.style.display == '')
panelmain.style.display = 'none';
else
panelmain.style.display = '';
}
A lap görgetésekor változtatjuk a kontrol pozícióját is, annyival, amennyivel megváltozik a csúszka pozíciója. A kódot doInit függvényben helyeztük el:
function doInit(){
var posx = (document.body.scrollLeft + leftpos);
var posy = (document.body.scrollTop + toppos);
fullpanel.style.left = posx;
fullpanel.style.top = posy;
}
A panel fejlécét megragadva vonszolhatjuk át egy másik pozícióba. Ehhez használjuk a doDragMain függvényt. A végén megadjuk, hogy mozgás közben a doMoveMain függvény fusson le:
if (event.srcElement.id == "panelbar")
{
dragstate = true;
z = fullpanel;
temp1 = z.style.pixelLeft;
temp2 = z.style.pixelTop;
x = event.clientX;
y = event.clientY;
document.onmousemove = doMoveMain;
}
A doMoveMain függvényben kalkuláljuk az új pozíciót:
...
z.style.pixelLeft = temp1 + event.clientX-x;
z.style.pixelTop = temp2 + event.clientY-y;
leftpos = document.all.fullpanel.style.pixelLeft - document.body.scrollLeft;
toppos = document.all.fullpanel.style.pixelTop - document.body.scrollTop;
...
return false;
A kontrol mozgását a csúszka pozíciójához igazítva elérhető, hogy az információ, mindig a felhasználó „keze ügyében” legyen, ugyanakkor „eltüntethesse”, ha az zavarja.