check this out www.developer.ps/moo/mooquee

On Fri, Aug 7, 2009 at 8:42 PM, theiviaxx <[email protected]> wrote:

>
> nvm, i found it.  The event is on the container and the mouse is over
> the marquee so the event breaks.
>
> On Aug 7, 9:49 am, TheIvIaxx <[email protected]> wrote:
> > Below is my code sample.  Clicking creates the marquee and it kinda
> > work, but not 100% as expected.  My main problem is that the mouseup
> > event is not being fired at all.  Am i using the events incorrectly?
> >
> > <!DOCTYPE html>
> > <html>
> > <head>
> >     <title></title>
> >     <script type='text/javascript' src='mootoolsCore.yc.js'></script>
> >     <script type='text/javascript'>
> >         var g;
> >         var Marquee = new Class({
> >             initialize: function() {
> >                 this.container = new Element('div', {'style':'width:
> > 800px;height:800px;background:#ccc;'}).inject(document.body);
> >                 this.isMouseDown = false;
> >
> >                 this.container.addEvent('mousedown',
> > this._down.bindWithEvent(this));
> >                 this.container.addEvent('mousemove',
> > this._drag.bindWithEvent(this));
> >                 this.container.addEvent('mouseup',
> > this._up.bindWithEvent(this));
> >             },
> >             _up: function(e) {
> >                 e.preventDefault();
> >                 alert('up');
> >                 if (this.isMouseDown) {
> >                     $$('#dragMarquee').each(function(item) {
> >                         item.destroy();
> >                     });
> >                 }
> >                 this.isMouseDown = false;
> >             },
> >             _down: function(e) {
> >                 e.preventDefault();
> >                 this.isMouseDown = true;
> >                 marq = new Element('div', {id:'dragMarquee'}).inject
> > (document.body);
> >                 marq.setStyles({
> >                     position:'absolute',
> >                     border:'1px solid #3399ff',
> >                     background:'#aaa',
> >                     width:100,
> >                     height:100,
> >                     top: e.page.y,
> >                     left: e.page.x,
> >                     'zIndex':2000
> >                 })
> >             },
> >             _drag: function(e) {
> >                 e.preventDefault();
> >                 marq = $('dragMarquee');
> >                 if (this.isMouseDown) {
> >                     h = e.page.y - parseInt(marq.getStyle('top'));
> >                     w = e.page.x - parseInt(marq.getStyle('left'));
> >                     marq.setStyles({
> >                         height:h,
> >                         width:w
> >                     })
> >                     this.log('x')
> >                 }
> >                 else {
> >                     marq.destroy();
> >                 }
> >             }
> >         })
> >         window.addEvent('domready', function() {
> >             g = new Marquee();
> >         })
> >     </script>
> > </head>
> > <body>
> >
> > </body>
> > </html>
>



-- 
Dirar Abu Kteish
Zan Studio
Web Development Manager
Mob.:+970-597-100118
website: www.zanstudio.com

Reply via email to