troubleshooting Question

Javascript drag and drop Bugging under firefox

Avatar of ChoobsTech
ChoobsTechFlag for Switzerland asked on
Web Languages and StandardsJavaScriptWeb Browsers
5 Comments1 Solution798 ViewsLast Modified:
Dear experts,

I am trying to make some basic drag and drop functions, I know there are some good libraries that do it already but I kind of like the idea of doing it my self.

It all works perfectly fine on IE but I would like to have a firefox compatibility as well.

At the moment, firefox adds some extra spaces between rows every time I perform a drag. (This page is not able to "drop" in current state...)

I tried to figure it out my self without any success, any help is welcome.

Thanks in advance,

ChoobsTech
<html>
<head>
<script type='text/javascript'>
var dragObject  = null;
var tmpReplObj  = null;
var mouseOffset = null;
var Dclass = null;
var DropObj = null;
 
//////////////////////////////////////////////////////////
/////////////DISABLE SELECTION////////////////////////
function disableSelection(element){
    element.onselectstart = function() {
      return false;
    };
    element.unselectable = "on";
    element.style.MozUserSelect = "none";
    element.style.cursor = "default";
}
//////////////////////////////////////////////////////////
/////////////ENABLE SELECTION////////////////////////
function enableSelection(element){
    element.onselectstart ="";
    element.unselectable = "";
    element.style.MozUserSelect = "";
    element.style.cursor = "";
}
 
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 getPosition(e){
	var left = 0;
	var top  = 0;
 
	while (e.offsetParent){
		left += e.offsetLeft;
		top  += e.offsetTop;
		e     = e.offsetParent;
	}
 
	left += e.offsetLeft;
	top  += e.offsetTop;
 
	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 mouseMove(ev){
   disableSelection(document.body);
   document.body.style.cursor='move';
	ev           = ev || window.event;
	var mousePos = mouseCoords(ev);
 
	if(dragObject){
	    if(!tmpReplObj)
		{
		 p=dragObject.parentNode;
		 tmpReplObj = dragObject.cloneNode(true);
		 dragObject.parentNode.insertBefore(tmpReplObj, dragObject);
         tmpReplObj.id="tmpRpl"+dragObject.id;
		 
		 if(dragObject.tagName=="TR")
		 {
		  tmpReplObjL=tmpReplObj.cells.length;
		  for(i=0;i<tmpReplObjL;i++)
		  {
		   tmpReplObj.cells[i].innerHTML="&nbsp;";
 
		   //TOP BORDER
			tmpReplObj.cells[i].style.borderTopStyle='dashed';
			tmpReplObj.cells[i].style.borderTopColor='black';
		    tmpReplObj.cells[i].style.borderTopWidth='1px';
			
			//BOTTOM BORDER
			tmpReplObj.cells[i].style.borderBottomStyle='dashed';
			tmpReplObj.cells[i].style.borderBottomColor='black';
		    tmpReplObj.cells[i].style.borderBottomWidth='1px';
		   //LEFT BORDER first col
		   if(i==0)
		   {
		    tmpReplObj.cells[i].style.borderLeftStyle='dashed';
			tmpReplObj.cells[i].style.borderLeftColor='black';
		    tmpReplObj.cells[i].style.borderLeftWidth='1px';
		   }
		   //RIGHT BORDER last col
		   if(i==tmpReplObjL-1)
		   {
		    tmpReplObj.cells[i].style.borderRightStyle='dashed';
			tmpReplObj.cells[i].style.borderRightColor='black';
		    tmpReplObj.cells[i].style.borderRightWidth='1px';
		   }
		  }
		 }
		 else
		 {
		  tmpReplObj.innerHTML="&nbsp;";
		  tmpReplObj.style.borderStyle='dashed';
		  tmpReplObj.style.borderColor='black';
		  tmpReplObj.style.borderWidth='1px';
		 }
		}
		
		t=mousePos.y - mouseOffset.y;
		l=mousePos.x - mouseOffset.x;
 
		dragObject.style.position = "absolute";
		dragObject.style.backgroundColor='';
		dragObject.style.zIndex=100;
		dragObject.style.top      = t;
		dragObject.style.left     = l;
		
 
		for(dobj=0;dobj<DropObj.length;dobj++)
		{
		 if(DropObj[dobj]!=undefined)
		 {
		  //alert(mousePos.y+">="+DropObj[dobj].style.top);
		  if( (parseInt(mousePos.y,10)>=parseInt(DropObj[dobj].style.top,10)) && (parseInt(mousePos.y,10)<=(parseInt(DropObj[dobj].style.top,10)+parseInt(DropObj[dobj].style.height,10))) )
		  {
		   DropObj[dobj].style.backgroundColor='red';
		  }
		 }
		}
 
	document.getElementById('test').innerHTML= "cursorX="+ l +"cursorY="+t+"****";
	document.getElementById('test').innerHTML+= "offset Y="+ mouseOffset.y +" Offset X="+mouseOffset.x+"****";
	document.getElementById('test').innerHTML+= "cursorX="+mousePos.x+"cursorY="+mousePos.y;
	document.getElementById('test').innerHTML+= "length= "+dragObject.style.width +" height" +dragObject.style.height;
	
		return false;
	}
}
 
function mouseUp(){
	enableSelection(document.body);
	document.onmousemove = "";
	document.onmouseup   = "";
	document.body.style.cursor='auto';
 
	dragObject.style.top=tmpReplObj.style.top;
	dragObject.style.left=tmpReplObj.style.left;
	dragObject.style.position='';
    tmpReplObj.parentNode.replaceChild(dragObject,tmpReplObj);
	
	tmpReplObj  = null;
	dragObject = null;
	mouseOffset = null;
	Dclass = null;
	DropObj=null;
}
 
function drag(item,ev,fctmove,fctstop,dropClass,parentTable){
ev           = ev || item.event;
 
dragObject  = item;
w=parseInt(dragObject.offsetWidth,10)-parseInt(4,10);
h=parseInt(dragObject.offsetHeight,10)-parseInt(4,10);
dragObject.style.width=w;
dragObject.style.height=h;
mouseOffset = getMouseOffset(item, ev);
Dclass = dropClass;
 
DropObj=new Array();
t=document.getElementById(parentTable).tBodies[0];
 
colors = new Array(14)
colors[0]="0"
colors[1]="1"
colors[2]="2"
colors[3]="3"
colors[4]="4"
colors[5]="5"
colors[5]="6"
colors[6]="7"
colors[7]="8"
colors[8]="9"
colors[9]="a"
colors[10]="b"
colors[11]="c"
colors[12]="d"
colors[13]="e"
colors[14]="f"
 
digit = new Array(5)
color=""
for (i=0;i<6;i++){
digit[i]=colors[Math.round(Math.random()*14)]
color = color+digit[i]
}
 
for(r=0;r<t.rows.length;r++)
{
 if( (t.rows[r].className==dropClass) && (t.rows[r]!=dragObject) )
 {
 
  t.rows[r].style.backgroundColor=color;
  t.rows[r].style.zIndex=0;
  t.rows[r].style.width=parseInt(t.rows[r].offsetWidth,10)-parseInt(4,10);
  t.rows[r].style.height=parseInt(t.rows[r].offsetHeight,10)-parseInt(4,10);
  
  DropPos=getPosition(t.rows[r]);
  if(t.rows[r].style.top=="")
  {
   t.rows[r].style.top=DropPos.y;
   t.rows[r].style.left=DropPos.x;
  }
  DropObj[r]=t.rows[r];
 // alert(DropObj[r]+"1st");
 }
 /*
 cells LOOP
 for(c=0;c<t.rows[r].cells.length;c++)
 {
  alert(t.rows[r].cells[c].className);
 }
 */
}
 
 
document.onmousemove = fctmove;
document.onmouseup   = fctstop;
}
 
</script>
</head>
<body>
 
<table border=1 id="mainDt">
	<colgroup>
		<col width="25%">
		<col width="75%">
	</colgroup>			   
<tr style='height:10px;' onmouseOver="this.style.borderStyle='dashed';this.style.borderColor='black';this.style.borderWidth='10px';">
 
	<th colspan='2'>Monday asdfsadf asdf fdsaadsf sfda  f dsafd sa fsd afd sa</th>
</tr>
<tr onmousedown="drag(this,event,mouseMove,mouseUp,'droppable','mainDt');">
	<th>Time</th>
	<th>Lesson**</th>
</tr>
<tr class="droppable" onmousedown="drag(this,event,mouseMove,mouseUp,'droppable','mainDt');">
	<td>1.00pm</td>
	<td>Pilates (Private Lesson)</td>
 
</tr>
<tr class="droppable" onmousedown="drag(this,event,mouseMove,mouseUp,'droppable','mainDt');">
	<td>2.00pm</td>
	<td  >Nursery Playdance</td>
</tr>
<tr class="droppable" onmousedown="drag(this,event,mouseMove,mouseUp,'droppable','mainDt');">
	<td>3.00pm</td>
	<td>Ballet Primary</td>
</tr>
 
<tr class="droppable" onmousedown="drag(this,event,mouseMove,mouseUp,'droppable','mainDt');">
	<td>4.00pm</td>
	<td>Football</td>
</tr>
<tr class="droppable" onmousedown="drag(this,event,mouseMove,mouseUp,'droppable','mainDt');">
	<td>5.00pm</td>
	<td>Boxing Primary</td>
</tr>
<tr class="droppable" onmousedown="drag(this,event,mouseMove,mouseUp,'droppable','mainDt');">
 
	<td>6.00pm</td>
	<td>Phone call</td>
</tr>
<tr class="droppable" onmousedown="drag(this,event,mouseMove,mouseUp,'droppable','mainDt');">
	<td>7.00pm</td>
	<td>Skype meeting</td>
</tr>
<tr class="droppable" onmousedown="drag(this,event,mouseMove,mouseUp,'droppable','mainDt');">
	<td>8.00pm</td>
 
	<td>Ballet Primary</td>
</tr>
<tr class="droppable" onmousedown="drag(this,event,mouseMove,mouseUp,'droppable','mainDt');">
	<td>9.00pm</td>
	<td>Bar meeting</td>
</tr>
<tr class="droppable" onmousedown="drag(this,event,mouseMove,mouseUp,'droppable','mainDt');">
	<td >10.00pm</td>
	<td >Clubbing</td>
 
</tr>
</table>
<span id='test'></span>
 
</body>
</html>
Join the community to see this answer!
Join our exclusive community to see this answer & millions of others.
Unlock 1 Answer and 5 Comments.
Join the Community
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 5 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros