Povleci in spusti
Koda JavaScrip za funcijo "Povleci in spusti" (ang. Drag and drop), npr. primer spodaj, kalkulator, ki plava na strani. CJ Floating Calculator
Koda za HTML
Spodnja koda deluje normalno v HTML.
var ie = document.all;
var ns6 = document.getElementById && !document.all;
var dragapproved=false;
var z, x, y;
function move(e)
{
if (dragapproved)
{
z.style.left=ns6? temp1+e.clientX-x : temp1+event.clientX-x;
z.style.top=ns6? temp2+e.clientY-y : temp2+event.clientY-y;
return false;
}
}
function drags(e)
{
if (!ie&&!ns6)
return;
var firedobj = ns6? e.target : event.srcElement;
var topelement = ns6? "HTML" : "BODY";
while (firedobj.tagName != topelement&&firedobj.className != "drag")
{
firedobj = ns6? firedobj.parentNode : firedobj.parentElement;
}
if (firedobj.className == "drag")
{
dragapproved = true;
z = firedobj;
temp1 = parseInt(z.style.left+0);
temp2 = parseInt(z.style.top+0);
x = ns6? e.clientX: event.clientX;
y = ns6? e.clientY: event.clientY;
document.onmousemove=move;
return false;
}
}
document.onmousedown=drags;
document.onmouseup=new Function("dragapproved=false");
Koda za xHTML
Zgornja koda v xHTML ne deluje, zato jo je potrebno malo prilagoditi.
var ie = document.all;
var ns6 = document.getElementById && !document.all;
var dragapproved=false;
var z, x, y;
function move(e)
{
if (dragapproved)
{
z.style.left=ns6? temp1+e.clientX-x+"px": temp1+event.clientX-x; //dodamo '+"px"'
z.style.top=ns6? temp2+e.clientY-y+"px": temp2+event.clientY-y; //dodamo '+"px"'
return false;
}
}
function drags(e)
{
if (!ie&&!ns6)
return;
var firedobj = ns6? e.target : event.srcElement;
var topelement = ns6? "xHTML" : "BODY"; //HTML-ju dodamo spredaj 'x', da dobimo xHTML
while (firedobj.tagName != topelement&&firedobj.className != "drag")
{
firedobj = ns6? firedobj.parentNode : firedobj.parentElement;
}
if (firedobj.className == "drag")
{
dragapproved = true;
z = firedobj;
temp1 = parseInt(z.style.left+0);
temp2 = parseInt(z.style.top+0);
x = ns6? e.clientX: event.clientX;
y = ns6? e.clientY: event.clientY;
document.onmousemove=move;
return false;
}
}
document.onmousedown=drags;
document.onmouseup=new Function("dragapproved=false");
To je kalkulator, ki plava na strani! Lahko ga povlečete okrog in ga uporabite na enak način, kot bi normalen kalkulator.