Početna

Video tutorijali

HTML

CSS

JavaScript

SMIL

Windows XP

Mreže

XML i XSL

Ostalo

IT rječnik

E-mail koder

Brzina konekcije

Generator lozinke

Meta tag generator

Vaše informacije

Lozinka Registracija

O Svemu

Pišite nam!

Drag and drop okviri

Koristeći JavuScript i DOM možemo dosta poboljšati interaktivnost stranice. Korisnik može sam prilagoditi sadržaj stranice svojim potrebama. Jedna od takvih prilagodbi su drag and drop okviri. Oni omogućavaju grupiranje informacija, bolju raspodjelu ili prilagodbu izbornika. Ove informacije ćemo grupirati tako da korisnik sam može pomjerati i raspoređivati okvire koji mu odgovaraju.

Ovdje se stvara mnogo problema prilikom kodiranja i nije najjednostavniji zadatak. Moramo prvo riješiti nekoliko osnovnih problema te zapisati njihova rješenja. Više jednostavnih problema koje riješimo donijet će nam rješenje našega problema. Prvo trebamo riješiti problem kako uhvatiti poziciju miša na ekranu, tj. njegove koordinate. Nakon toga trebamo dobiti informaciju je li korisnik pritisnuo tipku na mišu i ako da koju. Kada korisnik pritisne tipku na mišu moramo imati informaciju je li kliknuo na objekt koji se može micati. Ako korisnik vuče objekt sa pritisnutom tipkom moramo to prikazati. Tek na kraju kada korisnik ispusti objekt zapisujemo gdje ga je ispustio i tu ga moramo premjestiti.

Ovdje je kao što vidite mnogo problema kojima moramo naći programsko rješenje. JavaScript nam omogućava lako dobivanje informacija o objektima na Internet stranici i olakšava manipulaciju tim objektima. Prvo ćemo napisati JavaScript dio pa objasniti osnovne dijelove na koje treba posebno obratiti pažnju. U head dio kopirajte sljedeće (ctrl+a, ctrl+c):

<script type="text/javascript" >
var mouseOffset = null;
var iMouseDown  = false;
var lMouseState = false;
var dragObject  = null;

var DragDrops   = [];
var curTarget   = null;
var lastTarget  = null;
var dragHelper  = null;
var tempDiv     = null;
var rootParent  = null;
var rootSibling = null;

Number.prototype.NaN0=function(){return isNaN(this)?0:this;}

function CreateDragContainer(){
	
	/*
	Funkcija predstavlja kontejner koji 
	drzi objekte na okupu	
	*/
	
	var cDrag = DragDrops.length;
	DragDrops[cDrag] = [];

	
	for(var i=0; i<arguments.length; i++){
		var cObj = arguments[i];
		DragDrops[cDrag].push(cObj);
		cObj.setAttribute('DropObj', cDrag);

		/*
		Svim objektima u kontejneru treba biti omoguceno micanje
		*/
		
		for(var j=0; j<cObj.childNodes.length; j++){
			if(cObj.childNodes[j].nodeName=='#text') continue;
			cObj.childNodes[j].setAttribute('DragObj', cDrag);
		}
	}
}


function getPosition(e){
	var left = 0;
	var top  = 0;
	while (e.offsetParent){
		left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
		top  += e.offsetTop  + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);
		e     = e.offsetParent;
	}

	left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
	top  += e.offsetTop  + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);

	return {x:left, y:top};

}


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


function getMouseOffset(target, ev){
	ev = ev || window.event;

	var docPos    = getPosition(target);
	var mousePos  = mouseCoords(ev);
	return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
}


function mouseMove(ev){   
    ev = ev || window.event;   
 
    /*
	target je svaki objekt iznad kojeg se nalazi mis trenutno 
	*/
	
   var target   = ev.target || ev.srcElement;   
   var mousePos = mouseCoords(ev);   
 
        if(lastTarget && (target!==lastTarget)){   
           var origClass = lastTarget.getAttribute('origClass');   
        if(origClass) lastTarget.className = origClass;   
   }   
 
   
    var dragObj = target.getAttribute('DragObj');   
   
    
   if(dragObj!=null){   
 
          if(target!=lastTarget){   
            var oClass = target.getAttribute('overClass');   
          if(oClass){   
               target.setAttribute('origClass', target.className);   
               target.className = oClass;   
            }   
        }   
 
        
        if(iMouseDown && !lMouseState){   
           
           curTarget = target;   
 
           rootParent    = curTarget.parentNode;   
           rootSibling   = curTarget.nextSibling;   
           mouseOffset   = getMouseOffset(target, ev);   
  
           for(var i=0; i<dragHelper.childNodes.length; i++) dragHelper.removeChild(dragHelper.childNodes[i]);   
  
           dragHelper.appendChild(curTarget.cloneNode(true));   
           dragHelper.style.display = 'block';   
  
           var dragClass = curTarget.getAttribute('dragClass');   
            if(dragClass){   
                dragHelper.firstChild.className = dragClass;   
            }   
  
            dragHelper.firstChild.removeAttribute('DragObj');   
   
            var dragConts = DragDrops[dragObj];   
   
            curTarget.setAttribute('startWidth',  parseInt(curTarget.offsetWidth));   
            curTarget.setAttribute('startHeight', parseInt(curTarget.offsetHeight));   
            curTarget.style.display  = 'none';   
  
            for(var i=0; i<dragConts.length; i++){   
                with(dragConts[i]){   
                    var pos = getPosition(dragConts[i]);   
   
                    setAttribute('startWidth',  parseInt(offsetWidth));   
                    setAttribute('startHeight', parseInt(offsetHeight));   
                    setAttribute('startLeft',   pos.x);   
                    setAttribute('startTop',    pos.y);   
                 }   
   
               for(var j=0; j<dragConts[i].childNodes.length; j++){   
                    with(dragConts[i].childNodes[j]){   
                         if((nodeName=='#text') || (dragConts[i].childNodes[j]==curTarget)) continue;   
   
                         var pos = getPosition(dragConts[i].childNodes[j]);   
  
                        setAttribute('startWidth',  parseInt(offsetWidth));   
                        setAttribute('startHeight', parseInt(offsetHeight));   
                        setAttribute('startLeft',   pos.x);   
                        setAttribute('startTop',    pos.y);   
                     }   
                }   
            }   
        }   
     }   
   
     if(curTarget){   
        dragHelper.style.top  = mousePos.y - mouseOffset.y;   
        dragHelper.style.left = mousePos.x - mouseOffset.x;   
   
        var dragConts  = DragDrops[curTarget.getAttribute('DragObj')];   
        var activeCont = null;   
   
        var xPos = mousePos.x - mouseOffset.x + (parseInt(curTarget.getAttribute('startWidth')) /2);   
        var yPos = mousePos.y - mouseOffset.y + (parseInt(curTarget.getAttribute('startHeight'))/2);   
  
        for(var i=0; i<dragConts.length; i++){   
             with(dragConts[i]){   
             

			 
        if((parseInt(getAttribute('startLeft')) < xPos) &&
		  (parseInt(getAttribute('startTop')) < yPos) &&
		  ((parseInt(getAttribute('startLeft')) + parseInt(getAttribute('startWidth')))  > xPos) &&
		  ((parseInt(getAttribute('startTop'))  + parseInt(getAttribute('startHeight'))) > yPos)){
            activeCont = dragConts[i];   
   
            break;   
                 }   
             }   
         }   
   
        
        if(activeCont){  

							
           
            var beforeNode = null;   
   
           
             for(var i=activeCont.childNodes.length-1; i>=0; i--){   
                with(activeCont.childNodes[i]){   
                    if(nodeName=='#text') continue;   
  					
							if(curTarget != activeCont.childNodes[i] &&
							((parseInt(getAttribute('startLeft')) + parseInt(getAttribute('startWidth')))  > xPos) &&
							((parseInt(getAttribute('startTop'))  + parseInt(getAttribute('startHeight'))) > yPos)){
								beforeNode = activeCont.childNodes[i];
							
                     }   
                 }   
            }   
   
             
            if(beforeNode){   
                if(beforeNode!=curTarget.nextSibling){   
                    activeCont.insertBefore(curTarget, beforeNode);   
                }   
  
             
             } else {   
                if((curTarget.nextSibling) || (curTarget.parentNode!=activeCont)){   
                    activeCont.appendChild(curTarget);   
                }   
             }   
  
            
            if(curTarget.style.display!=''){   
                 curTarget.style.display  = '';   
             }   
        } else {   
  
            
            if(curTarget.style.display!='none'){   
                 curTarget.style.display  = 'none';   
            }   
         }   
     }   
   
    
     lMouseState = iMouseDown;   
     lastTarget  = target;   
     lMouseState = iMouseDown;   
   
     return false;   
}   


function mouseUp(ev){   
   if(curTarget){   
       
         dragHelper.style.display = 'none';   
  
        
        if(curTarget.style.display == 'none'){   
            if(rootSibling){   
                 rootParent.insertBefore(curTarget, rootSibling);   
             } else {   
                 rootParent.appendChild(curTarget);   
             }   
         }   
   
        
         curTarget.style.display = '';   
     }   
     curTarget  = null;   
     iMouseDown = false;   
}   


function mouseDown(){   
    iMouseDown = true;   
    if(lastTarget){   
         return false;
    }   
}   


function makeDraggable(item){
	if(!item) return;
	item.onmousedown = function(ev){
		dragObject  = this;
		mouseOffset = getMouseOffset(this, ev);
		return false;
	}
}

function makeClickable(item){
	if(!item) return;
	item.onmousedown = function(ev){
		document.getElementById('ClickImage').value = this.name;
	}
}

function addDropTarget(item, target){
	item.setAttribute('droptarget', target);
}

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

window.onload = function(){

	
	dragHelper = document.createElement('DIV');
	dragHelper.style.cssText = 'position:absolute;display:none;';

	CreateDragContainer(
		document.getElementById('DragContainer1'),
		document.getElementById('DragContainer2')		
	);

	document.body.appendChild(dragHelper);
	
	
}
</script>

Pri kraju koda imamo tri reda koda od kojih sve počinje.

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

Dijelovi document.onmousemove, document.onmousedown i document.onmouseup su globalne funkcije koje se u preglednicima stalno provjeravaju. Događajima smo dodijelili naše funkcije i upravo okidanje tih događaja poziva naše funkcije da se izvrše. Kada korisnik pomjeri miš poziva se funkcija mouseMove. Kada korisnik pritisne tipku na mišu poziva se mouseDown, a kada je pusti izvršava se funkcija mouseUp. U mouseMove funkciji imamo sljedeći dio koda:

ev = ev || window.event;

Ovaj dio hvata događaj (event) za IE i Firefox. Ako skriptu otvara IE on će zanemariti dio ev, a ako skriptu otvara Firefox onda će biti zanemaren window.event dio. Za sada smo uhvatili pomicanje miša i predali ga funkcijama na izvršavanje. Nakon detektiranja događaja moramo dobiti koordinate miša. Sada koristimo mouseCoords(ev) funkciju koja nam vraća trenutne koordinate pokazivača miša.

Kada kliknemo na neki objekt relativne koordinate miša spremimo u varijablu mouseOffset. Da bi dobili relativne koordinate koristimo funkciju getPosition(ev). Trenutno imamo koordinate gdje smo kliknuli spremljene u varijablu. Ako npr. kliknemo na koordinate (100px, 100px), i onda pomjerimo miš na koordinate (110px, 100px), onda znamo da objekt trebamo samo pomjeriti za 10px u Y smjeru. Samo na postojeće koordinate objekta dodamo razliku X2 i X1 te Y2 i Y1 koordinata. Pošto se ovo izvršava uvijek kada pomjerimo miš ustvari smo dobili pomjeranje objekta.

Za sada možemo pomjerati objekt po ekranu bez ikakvih ograničenja isto kao što možemo pomjerati prozore aplikacija po windows desktop-u. Moramo napraviti ograničenje tako da pri ispuštanju objekta provjerimo može li objekt biti tu spušten. Ako se objekt može tu ispustiti onda napravimo odgovarajuću akciju. Ovdje samo dodatno provjerimo nalazi li se miš iznad objekta u koji se smije ispustiti objekt. Jednako kao što provjeravamo nalazi li se miš iznad objekta koji smijemo nositi.

Ovo bi bili glavni dijelovi koji rješavaju 90% svih problema. Ostale funkcije pružaju podršku i imaju ulogu pomoćnih funkcija. Jedini dio koji ćete koristiti i mijenjati u ovoj skripti je dio koji se nalazi unutar window.onload = function(){ …}. Ovdje jednostavno dodajte ID div elemenata u kojima se nalaze vaši objekti. Mi imamo dva kontejnera sa objektima pa smo dodali:

document.getElementById('kontejner1') document.getElementById('kontejner2')

Ostaje nam još napraviti dio koji ide u body dio, tj. ono što će korisnik nositi. Taj dio u našem slučaju izgleda ovako:

<div class="DragContainer" id="DragContainer1" overclass= "OverDragContainer"> <div class="DragBox" id="Item1" overclass="OverDragBox" dragclass= "DragDragBox">Koristite mis za pomicanje</div> <div class="DragBox" id="Item2" overclass="OverDragBox" dragclass= "DragDragBox">Koristite mis za pomicanje</div> <div class="DragBox" id="Item3" overclass="OverDragBox" dragclass= "DragDragBox">Koristite slike ako zelite<br><br><img src="disk.png" border="0"></div> <div class= "DragBox" id="Item4" overclass="OverDragBox" dragclass= "DragDragBox">Koristite mis za pomicanje</div> </div> <div class="DragContainer" id="DragContainer2" overclass= "OverDragContainer"> <div class="DragBox" id="Item5" overclass="OverDragBox" dragclass= "DragDragBox">Osim teksta stavite bilo sta u div element</div> <div class="DragBox" id="Item6" overclass="OverDragBox" dragclass= "DragDragBox">Osim teksta stavite bilo sta u div element</div> <div class="DragBox" id="Item7" overclass="OverDragBox" dragclass= "DragDragBox"><img src="disk2.png" border="0"></div> <div class="DragBox" id="Item8" overclass="OverDragBox" dragclass= "DragDragBox">Osim teksta stavite bilo sta u div element</div> </div>

Sada je kompletna stranica spremna i funkcionalna. Trebamo još dodijeliti CSS našim div elementima da bi imali ljepši pregled. Unutar head dijela dodajte sljedeći kod:

Sada naši elementi imaju i funkcionalnost i preglednost. Ako dodate još kontejnera nemojte zaboraviti dodati ih i u skriptu inače vam novi kontejneri neće raditi. Za kraj nam ostaje još da vidimo kako sve ovo što smo napisali radi u praksi.

Koristite mis za pomicanje

Koristite slike ako zelite

Koristite mis za pomicanje

Osim teksta stavite bilo sta u div element

Ako ste naučili nešto novo napišite jedan komentar podrške.
Hvala!

Autor: Vedran

Datum objave: 10.10.2008

Za vas smo izdvojili:

■  Saznajte visinu i širinu Internet preglednika
■  Jednostavni Tooltip box
■  Kontrola toka izvršavanja
■  Kako napraviti rotirajući baner
■  Dinamičko generiranje izbornika

Zadnjih 5 članaka

■  Lozinke, lozinke …
■  Kako prebaciti PDF u Word dokument
■  Kako postaviti stranicu na Internet
■  Cyclic Redundancy Check error
■  Riješite se Antivirus 2009 - rogue programa

KOMENTARI:

Andrej
14.10.2008

svaka cast!bas sam to trebao.

vedran
14.10.2008

Drago nam je što vam se sviđa i mislimo da će ovaj kod i drugima pomoći.

Samo registrirani korisnici mogu komentirati.