[thelist] Event bubbling issue?

Tom Dell'Aringa pixelmech at yahoo.com
Fri May 31 10:21:01 CDT 2002


Not a bad idea, but not sure we want all the extra code that comes with it. Anyway, I was able to
figure out the problem - turned out because the knobs were in a parent containing div, the
calculations for making sure the mouse was on the knob before it allowed you to drag were off.
Fixing those numbers enabled the drag.

Thanks

Tom

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


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



More information about the thelist mailing list