[thelist] Event bubbling issue?

Thu May 30 17:27:01 CDT 2002

Hi all,

I'm STILL working on my drag script, trying to make it fully dynamic instead of calling items by
name (I have 5 knobs that need to drag, why have 5x the code?)

Its like this:
1 Div on top which will be a display area later
1 Div "controlBase" that is a container for all the sliders (so I can move the controls as one)
5 sliding knobs

There is a knob on top purely for testing, its outside the controlBase div.

Here's the problem:

I can drag the knob that is OUTSIDE the controlBase. But when I try the others, they don't move
... EXCEPT! If you uncomment the one alert (noted in script) THEN you can click on the others
(after the alert) and they will move!

It almost seems as if the alert() breaks or releases an event or something. I tried setting the
current element to NULL in a couple places to no avail (as if the script weren't letting go of the
object ref).

I've got googoo eyes looking at this so I was hoping someone might have a suggestion.

Here is the whole page below.

Tom

--------------------------------------------------------
<html>
<SCRIPT LANGUAGE="JavaScript">
function init() {
	document.onmousedown = mouseDown
	document.onmousemove = mouseMove
	document.onmouseup = mouseUp

	sliderMin = 0;
	sliderMax = 1000;

	isActive = false;
}

function mouseDown(e) {
	if (event.button != 1) return true;         //can't drag with right button, stops event.

	//get object
	elem = event.srcElement
	if(elem.className == "draggable"){
		knob = elem.style;
		knob.xpos = elem.offsetLeft;
		knob.ypos = elem.offsetTop;
		knob.w = elem.clientWidth;
		knob.h = elem.clientHeight;

		//since controls are in a container, we need to find the parent location
		pElement = document.getElementById(elem.id).offsetParent
		pElement.xpos = pElement.offsetLeft;
		pElement.ypos = pElement.offsetTop;
	}
	//alert("object is: "+elem.id)  //Uncomment this, and you can drag the others!!!!

	var x = event.x + document.body.scrollLeft;
	var y = event.y + document.body.scrollTop;

	//makes sure you grabbed the knob, sets drag to active
	if ((x > knob.xpos) && (x < knob.xpos + knob.w) && (y > knob.ypos) && (y < knob.ypos + knob.h)) {

		isActive = true;

		//item pointer
		dragObject = knob;
	}

	if (isActive == true){
		//are we on the knob?
		if ((x >= dragObject.xpos) && (x <= dragObject.xpos + dragObject.w)) {
			//where 'x' is on the knob
			dragObject.dragOffsetX = x - dragObject.xpos
		}
		return false
	} else {
		elem = null
		return true
	}
}

function mouseMove(e) {
	var x = event.x + document.body.scrollLeft; //scroll values will be 0 if no scrolling
	var y = event.y + document.body.scrollTop;

	if (isActive) {
		rMoveTo = x - dragObject.dragOffsetX;
			if (rMoveTo > sliderMax) rMoveTo = sliderMax;
			if (rMoveTo < sliderMin) rMoveTo = sliderMin;
		knob.xpos = rMoveTo;
		knob.left = knob.xpos;
		rValue = (knob.xpos + 4) - 50; //50 is left position of knob, 4 is half the width of knob
	}
	return true
}

function mouseUp(e) {
	var x = event.x + document.body.scrollLeft
	var y = event.y + document.body.scrollTop

	isActive = false
	return true
}
</script>
</HEAD>
<body OnLoad="init()">
<div id="aKnob" class="draggable" style="position:absolute; left:10; top:10; width:10; height:10;
z-index:5; cursor: hand; background-color:#ff6633;"></div>
<!-- temp viewer -->
<div id="temp" style="position:absolute; top:10; left:5; width:335; height:180; background-color:
#cccccc; z-index; 0">
</div>

<!-- control base -->
<div id="controlBase" style="position: absolute; top: 205; left: 5; z-index; 0; width: 330;
height: 115; border-style: solid; border-color: silver; border-width: 1px; background-color:
#ffcc33">

	<div id="speedKnob" class="draggable" style="position:absolute; left:20; top:10; width:10;
height:10; z-index:2; cursor: hand; background-color:#ff6633;"></div>

	<div id="manualKnob" class="draggable" style="position:absolute; left:20; top:30; width:10;
height:10; z-index:2; cursor: hand; background-color:#ff6633;"></div>

	<div id="zoomKnob" class="draggable" style="position:absolute; left:20; top:50; width:10;
height:10; z-index:2; cursor: hand; background-color:#ff6633;"></div>

	<div id="contextKnob" class="draggable" style="position:absolute; left:20; top:70; width:10;
height:10; z-index:2; cursor: hand; background-color:#ff6633;"></div>

	<div id="pitchKnob" class="draggable" style="position:absolute; left:20; top:90; width:10;
height:10; z-index:2; cursor: hand; background-color:#ff6633;"></div>

<!-- close control div -->
</div>

</body>
</html>

__________________________________________________
Do You Yahoo!?
Yahoo! - Official partner of 2002 FIFA World Cup
http://fifaworldcup.yahoo.com