Dom Drag - Having Most Recent Item Appear on Top

**dmwhipp** · 06-26-2014, 04:02 PM

1. Script: DOM Drag and Drop Script
2. Script URL: http://www.dynamicdrive.com/dynamici...drag/index.htm
3. I have used this script to create some games for my site - is there any way to have the most recently clicked item appear on top of other items?

For example, here is one of the games: http://www.altogetherchristmas.com/fun/snowman.html. You can see the issue by putting the yellow wig on the snowman, and then the santa hat. Even though you placed the santa hat last, it appears beneath the wig.

Thanks,
Deborah

**Deadweight** · 06-26-2014, 06:02 PM

You might need to change the z-index of the yellow wing and santa hat

**vwphillips** · 06-27-2014, 03:11 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
.dragparent {
  position:absolute;z-Index:4;left:210px;width:200px;height:200px;background-Color:red;
}

.drag {
  position:absolute;left:10px;width:100px;height:100px;
}

/*]]>*/
</style></head>

<body>
<div class="dragparent" >
<img class="drag" src="http://www.vicsjavascripts.org/StdImages/1.gif" />
</div>

<img class="drag" src="http://www.vicsjavascripts.org/StdImages/2.gif" />
<img class="drag" src="http://www.vicsjavascripts.org/StdImages/3.gif" />

<script type="text/javascript">
/*<![CDATA[*/
// Drag (27-June-2014)
// by: Vic Phillips - http://www.vicsjavascripts.org/

function zxcDrag(o){
 var cls=o.CommonClass,p=document.getElementById(o.Parent)||document.body,mz=o.MaxZIndex,c=p.getElementsByTagName(o.Type||'*'),a=[],z,z0=0;
 this.z=0
 for (;z0<c.length;z0++){
  if((' '+c[z0].className+' ').match(' '+cls+' ')){
   p=c[z0].parentNode;
   p=(' '+p.className+' ').match(' '+'dragparent ')?p:c[z0];
   a.push(p);
   !isFinite(this.s(p,'top'))?p.style.top='0px':null;
   !isFinite(this.s(p,'left'))?p.style.left='0px':null;
   this.addevt(c[z0],'mousedown','down',p);
   z=this.s(p,'z-Index');
   z=isFinite(z)&&z>0?z:0;
   p.style.zIndex=z;
   this.rz=this.z=Math.max(z,this.z||0);
  }
 }

 this.a=a;
 this.dx=o.DragX!==false;
 this.dy=o.DragY!==false;
 this.mz=typeof(mz)=='number'&&mz>=0?mz:null;
 this.mx=typeof(o.MinX)=='number'?o.MinX+.1:null;
 this.xx=typeof(o.MaxX)=='number'?o.MaxX+.1:null;
 this.my=typeof(o.MinY)=='number'?o.MinY+.1:null;
 this.xy=typeof(o.MaxY)=='number'?o.MaxY+.1:null;
 this.addevt(document,'mousemove','move');
 this.addevt(document,'mouseup','up');
}

zxcDrag.prototype={

 down:function(e,obj){
  var o=this,z=o.s(obj,'z-Index');
  o.mse=[e.clientX,e.clientY];
  obj.style.zIndex=typeof(o.mz)=='number'?o.z++:o.s(obj,'z-Index')+1;
  o.obj=obj;
  return o.rtn(e);
 },

 move:function(e){
  if (this.obj){
   var o=this,mse=[e.clientX,e.clientY],x=this.s(o.obj,'left'),y=this.s(o.obj,'top'),x=x-o.mse[0]+mse[0],y=y-o.mse[1]+mse[1];
   o.dx&&isFinite(x)?o.obj.style.left=Math.max(Math.min(x,o.xx?o.xx:x),o.mx?o.mx:x)+'px':null;
   o.dy&&isFinite(y)?o.obj.style.top=Math.max(Math.min(y,o.xy?o.xy:y),o.my?o.my:y)+'px':null;
   this.mse=mse;
   return this.rtn(e);
  }
 },

 up:function(e){
  var o=this,z0=0;
  if (o.obj){
   if (typeof(o.mz)!='number'){
    o.obj.style.zIndex=this.s(o.obj,'z-Index')-1;
   }
   else if (o.z>o.mz){
    for (;z0<o.a.length;z0++){
     o.a[z0].style.zIndex=Math.max(this.s(o.a[z0],'z-Index')-o.mz,0);
    }
    o.z=o.rz;
   }
   o.obj=null;
   return o.rtn(e);
  }
 },

 rtn:function(e){
  if(e.stopPropagation){
   e.stopPropagation();
  }
  if (!window.event){
   e.preventDefault();
  }
  e.cancelBubble=true;
  e.cancel=true;
  e.returnValue=false;
  return false;
 },

 s:function(o,p,px){
  var s=o.currentStyle?o.currentStyle[p.replace(/-/g,'')]:document.defaultView.getComputedStyle(o,null).getPropertyValue(p.toLowerCase());
  return px?s:parseInt(s);
 },

 addevt:function(o,t,f,p,p1){
  var oop=this;
  o.addEventListener?o.addEventListener(t,function(e){ return oop[f](e,p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](e,p,p1); }):null;
 }



}

new zxcDrag({
 CommonClass:'drag', // the common class name of the drag object handles (string)
                     // Note: if the parent node class name includes keyword 'dragparent' the parent node will be dragged.
 DragX:true,         //(optional) false = no drag X.                     (boolean, default = true)
 DragY:true,         //(optional) false = no drag Y.                     (boolean, default = true)
 MinX:0,             //(optional) the minimum drag X position.           (number, default = no limits)
 MaxX:520,           //(optional) the maximum drag X position.           (number, default = no limits)
 MinY:0,             //(optional) the minimum drag Y position.           (number, default = no limits)
 MaxY:520,           //(optional) the maximum drag Y position.           (number, default = no limits)
 MaxZIndex:10        //(optional) the maximum z-Index.                   (number, default = only increment on drag)
});
/*]]>*/
</script>

</body>

</html>

**dmwhipp** · 07-01-2014, 03:11 PM

Hi Vic,
Sorry for the delay in response - I've been out of town. I installed the new script on a test page here: http://www.altogetherchristmas.com/fun/snowman2.html. It's still not working so the most recent item stays on top. In fact, if there's any pattern as to which of the draggable items stays on top, I haven't been able to spot it. All of the draggable items are transparent gifs and there is no z-index set on any of them.
Deborah