piszę w JavaScript obsługę "pływających" okien. Kiedyś coś takiego napisałem i działało dość dobrze (z tym że dużo kodu było przeplatane z HTML'em), postanowiłem całkowicie oddzielić kod HTML od JavaScript i napotkałem na mały problem. Podczas przesuwania okna powoli wszystko jest w porządku, ale przy gwałtowniejszym ruchu okno się gubi (głównie ruch pionowy, przy poziomym trudno uzyskać taki efekt). Poniżej przedstawiam kod oraz link do przykładu.
Kod
var PositionX = 0;
var PositionY = 0;
var WindowHandle = false;
window.onload = function ()
{
var Window = document.getElementById ('windowTest');
var Elements = Window.getElementsByTagName ('div');
for (var Increment = 0; Increment < Elements.length; Increment++)
{
if (Elements[Increment].getAttribute ('class') == 'title')
{
Elements[Increment].onmouseover = function (Event)
{
}
Elements[Increment].onmousedown = function (Event)
{
this.style.cursor = 'move';
if (WindowHandle == false)
{
PositionX = Event.layerX;
PositionY = Event.layerY;
WindowHandle = true;
}
return true;
}
Elements[Increment].onmousemove = function (Event)
{
if (WindowHandle == true)
{
Window.setAttribute ('class', 'window move');
Window.style.top = (Event.pageY - PositionY) + 'px';
Window.style.left = (Event.pageX - PositionX) + 'px';
}
document.getElementById ('X').innerHTML = Window.style.top;
document.getElementById ('Y').innerHTML = Event.pageY;
document.getElementById ('Z').innerHTML = PositionY;
}
Elements[Increment].onmouseup = function (Event)
{
Window.setAttribute ('class', 'window');
this.style.cursor = 'default';
WindowHandle = false;
}
Elements[Increment].onmouseout = function (Event)
{
Window.setAttribute ('class', 'window');
this.style.cursor = 'default';
WindowHandle = false;
}
}
}
}
var PositionY = 0;
var WindowHandle = false;
window.onload = function ()
{
var Window = document.getElementById ('windowTest');
var Elements = Window.getElementsByTagName ('div');
for (var Increment = 0; Increment < Elements.length; Increment++)
{
if (Elements[Increment].getAttribute ('class') == 'title')
{
Elements[Increment].onmouseover = function (Event)
{
}
Elements[Increment].onmousedown = function (Event)
{
this.style.cursor = 'move';
if (WindowHandle == false)
{
PositionX = Event.layerX;
PositionY = Event.layerY;
WindowHandle = true;
}
return true;
}
Elements[Increment].onmousemove = function (Event)
{
if (WindowHandle == true)
{
Window.setAttribute ('class', 'window move');
Window.style.top = (Event.pageY - PositionY) + 'px';
Window.style.left = (Event.pageX - PositionX) + 'px';
}
document.getElementById ('X').innerHTML = Window.style.top;
document.getElementById ('Y').innerHTML = Event.pageY;
document.getElementById ('Z').innerHTML = PositionY;
}
Elements[Increment].onmouseup = function (Event)
{
Window.setAttribute ('class', 'window');
this.style.cursor = 'default';
WindowHandle = false;
}
Elements[Increment].onmouseout = function (Event)
{
Window.setAttribute ('class', 'window');
this.style.cursor = 'default';
WindowHandle = false;
}
}
}
}
Przykład (testowałem to tylko pod Firefox'em 3.x, zapewne pod innymi przeglądarkami działać nie będzie).
?
.