[thelist] Event bubbling issue?

Fri May 31 03:16:01 CDT 2002

Sorry I can't examine your code, but have you tried DynAPI?  It has drag
functions already built and working and OO.

Best of luck,
Hershel

----- Original Message -----
From: "Tom Dell'Aringa" <pixelmech at yahoo.com>
To: <thelist at lists.evolt.org>
Sent: Friday, May 31, 2002 12:26 AM
Subject: [thelist] Event bubbling issue?

> 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
> --
> For unsubscribe and other options, including
> the Tip Harvester and archive of thelist go to:
> http://lists.evolt.org Workers of the Web, evolt !