Demo stran

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.

CJ Floating Calculator


icon-main