[thelist] Event bubbling issue?
Tom Dell'Aringa
pixelmech at yahoo.com
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
More information about the thelist
mailing list