Advertisement

08.09.2008 at 08:08AM PDT, ID: 23635067 | Points: 500
[x]
Attachment Details

Javascript drag and drop Bugging under firefox

Asked by ChoobsTech in Dynamic HTML (DHTML), JavaScript, Firefox Web Browser

Tags:

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,

ChoobsTechStart Free Trial 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:
183:
184:
185:
186:
187:
188:
189:
190:
191:
192:
193:
194:
195:
196:
197:
198:
199:
200:
201:
202:
203:
204:
205:
206:
207:
208:
209:
210:
211:
212:
213:
214:
215:
216:
217:
218:
219:
220:
221:
222:
223:
224:
225:
226:
227:
228:
229:
230:
231:
232:
233:
234:
235:
236:
237:
238:
239:
240:
241:
242:
243:
244:
245:
246:
247:
248:
249:
250:
251:
252:
253:
254:
255:
256:
257:
258:
259:
260:
261:
262:
263:
264:
265:
266:
267:
268:
269:
270:
271:
272:
273:
274:
275:
276:
277:
278:
279:
280:
281:
282:
283:
284:
285:
286:
287:
288:
289:
290:
291:
292:
293:
294:
295:
296:
297:
298:
299:
300:
301:
302:
303:
304:

<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>
[+][-]08.10.2008 at 04:43PM PDT, ID: 22201125

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 7-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]08.10.2008 at 10:20PM PDT, ID: 22201961

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 7-day free trial to view this Expert Comment or ask the Experts your question.

 
 
Loading Advertisement...
20080716-EE-VQP-32 / EE_QW_2_20070628