Radoviny.net

V jedné webové aplikaci jsem potřeboval pomocí myši hýbat s elementem div. Po troše Googlení a zkoušení jsem došel k následujícímu skriptu, který umožňuje pohybovat po stránce zvoleným elementem.

Vysvětlení některých částí:

function dragElement(id)

Tuto funkci volám při události onmousedown na elementu, kterým má drag and drop začít. Jako parametr předávám id elementu, kterým chci pohybovat.

function dropElement()

Tuto funkci naopak volám při události onmouseup na tomtéž objektu, kde drag and drop začal a dojde tak k ukončení akce drag and drop.

window.document.onmousemove = mouseMove;
window.document.onmouseup = mouseUp;
window.document.onmousedown = mouseDown;
window.onmousedown = mouseDown;
window.onmouseup = mouseUp;

Přiřazuje událostem nad oknem a dokumentem obslužné metody. Poslední

function mouseDown(event) {
event = event || window.event;
if (dragingElement) {
var elementPos = getElementPosition(dragingElement);
var mousePos = mouseCoords(event);
mouseOffset = {x:mousePos.x - elementPos.x, y:mousePos.y - elementPos.y};
event.preventDefault();
return false;
}
return true;
}

Funkce pro obsluhu stisknutí tlačítka myši nad dokumentem. Zajímavé jsou dvě řádky:

event.preventDefault();
return false;

…obě dělají vlastně totéž, ta první to zajistí v IE, ta druhá v prohlížečích. Docílí se tím zamezení výběru obsahu stránky, pokud dojde k začátku akce drag and drop. Pokud tedy kliknu na objekt, kterým lze pohybovat (má na onmousedown přiřazenu funkci dragElement), nedojdě k výběru obsahu stránky. Jinak ano, to aby byla možnost vybrat obsah zachována.

function mouseCoords(event) {
if (event.pageX || event.pageY) {
return {x:event.pageX, y:event.pageY};
}
return {
x:event.clientX + document.body.scrollLeft - document.body.clientLeft,
y:event.clientY + document.body.scrollTop  - document.body.clientTop
};
}

Opět kvůli IE zdojené řešení, funkce vrací pozici myši v dokumentu. Ta druhá část je pro IE, kde je dokonce potřeba připočíst hodnoty clientLeft a clientTop, protože v IE prostě document nezačíná na bodě 0,0.

Ještě jedna IE rozdílnost…

IE nedává při obsluze událostí tuto událost jako parametr do obslužné funkce. Je tedy potřeba si jí na začátku obslužné funkce přečíst z window.event a to dělá řádek:

event = event || window.event;

Zbytek kódu již neobsahuje nijak moc zvláštností, nicméně pro úpravy a vylepšování je stále dostatek prostoru.