Portals

Dashboard look and feel

[Alternative Future]

Greetings to the forum,

I was wondering if someone could point me in the direction of some nice looking portal interfaces similar to Google Analytics Dashboard etc.
Also can someone please point me in the direction of "how to" guides or “examples of” on being able to create drag and drop functionality of each of the tiles/modules used on the dashboard e.g. dragging and dropping the calendar around the browser to a preferred location.

Some examples of what I have found so far: Bindows, MS Silverlight.

All help on the matter is great fully appreciated and thanks in advance.

-Gs

edit reason: Added examples of what found so far, but still having difficulty finding simple drag and drop JavaScript examples.

[edited by: Alternative_Future at 11:19 am (utc) on Mar. 26, 2008]

[Alternative Future]

Anyone? Even just a pointer to a simple drag and drop JavaScript tutorial would be suffice ;-)

-Gs

[mehh]

... drag and drop ...

How far do you want this tutorial to go? Simple floating panels? Reordering a list?

[Alternative Future]

Hi mehh,

Thanks for the reply.

Let us just start with Simple floating panels.

Thanks

-Gs

[mehh]

As I couldn't find a couldn't find a tutorial on google that I liked the look of (they all polluted the global scope) so, I wrote one myself.

Ok for starters lets create a simple JSON object with a few tools we will need.

var dragndrop={
 $$:function (cName,tag,p){
  p=(p)?p:document;
  tag=(tag)?tag:"*";
  var eListReturn=[],eList=p.getElementsByTagName(tag);
  var cRegEx=new RegExp("(^¦\\s)"+cName+"(\\s¦$)");
  var i=0;
  for(;i<eList.length;i++){
   if(cRegEx.test(eList[i].className)){
    eListReturn.push(eList[i]);
    }
   }
  return eListReturn;
  },
 addEvent:function (el,eName,fn){
  if(el.addEventListener){ 
   el.addEventListener(eName,fn,false); 
   } 
  else if(el.attachEvent){ 
   el.attachEvent("on"+eName,fn); 
   } 
  else{ 
   el["on"+eName]=fn; 
   }
  }
 };

These two tools are quite simple, the first (

$$

) gets all elements of a given class/tagname the second attaches an event handler to an element. Now we can get down to creating the drag and drop part.

init:function (){
 dragndrop.addEvent(document,"mousemove",dragndrop.mouse);
 dragndrop.addEvent(document,"mouseup",dragndrop.clearDrag);
 var eList=dragndrop.$$("drag","div");
 var i=0;
 for(;i<eList.length;i++){
  dragndrop.addEvent(eList[i],"mousedown",dragndrop.getDrag(eList[i]));
  }
 },

This is the init function of the dragndrop object, it does all the attaching of event handlers, etc. lets go through it line by line:

dragndrop.addEvent(document,"mousemove",dragndrop.mouse);
dragndrop.addEvent(document,"mouseup",dragndrop.clearDrag);

Here it is attaching functions to the window object. We will go into more detail about these functions when we create them.

var eList=dragndrop.$$("drag","div");

Here it is getting a list of all div elements with the class drag using the tool we created earlier

var i=0;
for(;i<eList.length;i++){
 dragndrop.addEvent(eList[i],"mousedown",dragndrop.getDrag(eList[i]));
 }

Finaly it loops through the elements attaching the return value of

dragndrop.getDrag

to the mousedown event.

Now to make the crucial functions,

setDrag:function (e,el){
 el.dragOffsetX=((e.x)?e.x:e.pageX)-el.offsetLeft;
 el.dragOffsetY=((e.y)?e.y:e.pageY)-el.offsetTop;
 el.style.zIndex=dragndrop.zIndex++;
 dragndrop.eDrag=el;
 },
getDrag:function (el){
 return function(e){
   e=(e)?e:window.event;
   dragndrop.setDrag(e,el);
  }
 },

Earlier we used the

getDrag

function to attach a handler to the elements, but as you may have noticed, we also used the element as an argument, the function

getDrag

returns now has fixed in it a reference to that element, this is called a closure, it helps stop scope errors and hours of debugging time going to waste. The other function

setDrag

is the one doing all of the work, firstly it creates two propertys on the element saying from the top left corner how far in it was clicked, this is used later to give it a "sticky" effect, so the cursor stays where it started rather than moving to the corner. Next it assigns a zIndex to the element, this makes it positioned above the last draged element. Finaly it creates a reference to the element in the variable

dragndrop.eDrag

for other functions to use.

mouse:function(e){
 e=(e)?e:window.event;
 if(dragndrop.eDrag){
  var mouseX=e.x;
  var mouseY=e.y;
  mouseX-=dragndrop.eDrag.dragOffsetX;
  mouseY-=dragndrop.eDrag.dragOffsetY;
  dragndrop.eDrag.style.left=mouseX+"px";
  dragndrop.eDrag.style.top=mouseY+"px";
  }
 },

This is the event that will be fired every time the mouse moves, first it checks to see if there is an element currently being draged (

dragndrop.eDrag

) then it takes where the mouse currently is, minuses the offset of where the user clicked and sets the left and top propertys accordingly.

clearDrag:function (){
 dragndrop.eDrag.dragOffsetX=undefined;
 dragndrop.eDrag.dragOffsetY=undefined;
 dragndrop.eDrag=null;
 },

This function simply removes all the information the other functions created. Last thing we need to do is create two propertys, that the functions used zIndex and eDrag....

   zIndex:1,
   eDrag:null,

... and set the init function to go off on load.

dragndrop.addEvent(window,"load",dragndrop.init);

Make sure that somewhere in your stylesheet in makes the divs have

position:relitive

or

position:absolute

and we're set. here is an example page with some styles on it:

[1]<html>
 <head>
 <title>Drag And Drop</title>
 <script type="text/javascript">
  var dragndrop={
   zIndex:1,
   eDrag:null,
   init:function (){
    dragndrop.addEvent(document,"mousemove",dragndrop.move);
    dragndrop.addEvent(document,"mouseup",dragndrop.clearDrag);
    var eList=dragndrop.$$("drag","div");
    var i=0;
    for(;i<eList.length;i++){
     dragndrop.addEvent(eList[i],"mousedown",dragndrop.getDrag(eList[i]));
     }
    },
   move:function(e){
    e=(e)?e:window.event;
    if(dragndrop.eDrag){
     var mouseX=e.x;
     var mouseY=e.y;
     mouseX-=dragndrop.eDrag.dragOffsetX;
     mouseY-=dragndrop.eDrag.dragOffsetY;
     dragndrop.eDrag.style.left=mouseX+"px";
     dragndrop.eDrag.style.top=mouseY+"px";
     }
    },
   setDrag:function (e,el){
    el.dragOffsetX=((e.x)?e.x:e.pageX)-el.offsetLeft;
    el.dragOffsetY=((e.y)?e.y:e.pageY)-el.offsetTop;
    el.style.zIndex=dragndrop.zIndex++;
    dragndrop.eDrag=el;
    },
   getDrag:function (el){
     return function(e){
      e=(e)?e:window.event;
      dragndrop.setDrag(e,el);
     }
    },
   clearDrag:function (){
    dragndrop.eDrag.dragOffsetX=undefined;
    dragndrop.eDrag.dragOffsetY=undefined;
    dragndrop.eDrag=null;
    },
   $$:function (cName,tag,p){
    p=(p)?p:document;
    tag=(tag)?tag:"*";
    var eListReturn=[],eList=p.getElementsByTagName(tag);
    var cRegEx=new RegExp("(^¦\\s)"+cName+"(\\s¦$)");
    var i=0;
    for(;i<eList.length;i++){
     if(cRegEx.test(eList[i].className)){
      eListReturn.push(eList[i]);
      }
     }
    return eListReturn;
    },
   addEvent:function (el,eName,fn){
    if(el.addEventListener){ 
     el.addEventListener(eName,fn,false); 
     } 
    else if(el.attachEvent){ 
     el.attachEvent("on"+eName,fn)
     } 
    else{ 
     el["on"+eName]=fn; 
     }
    }
  };
  dragndrop.addEvent(window,"load",dragndrop.init);
 </script>
 <style type="text/css">
  .drag{
   width:300px;
   height:200px;
   background:#269;
   text-align:center;
   border: 1px solid #48C;
   position:absolute;
  }
  .drag .cont{
   height:177px;
   width:294px;
   margin: 0 auto 3px auto;
   background:#FFF;
   border: 1px solid #48C;
  }
  .drag .title{
   font: bold 15px/20px Verdana, Arial, sans-serif;
   color:#FFF;
   height:20px;
   display:block;   
  }
 </style>
 </head>
 <body>
 <div class="drag">
  <span class="title">Hello</span>
  <div class="cont">Why hello there, this is the main content.</div>
 </div>
 <div class="drag">
  <span class="title">Another Window</span>
  <div class="cont">Why hello there, this is the main content.</div>
 </div>
 </body>
</html>[/1]

Any Questions/Comments don't hesitate to ask.

[Alternative Future]

Outstanding mehh,

I shall make a start on this later today, I cannot thank you enough for taking the time out to complete such an example :)

-Gs