on mousedown I set the X-Y coordinates with Event.pointer X Y this is
then picked up by the mouse move event. However on the first mousedown
event the mousemove seems to store    the following variables:
var cssLeft = mouseX;
var cssTop = mouseY;

What am I doing wrong?
I just want to use the prototype.js to create a box when you select the
background and drag the mouse if creates a box when you let go on the
left mouse it disappears.

Similar to when you select multiple documents from your desktop by
clicking the desktop dragging mouse.
Has anyone got any examples of this or can tell me what I am doing
wrong?


http://www.bluestudios.co.uk/temp/temp.html

<pre>
Event.observe(document.body, 'mousedown', function(event) {
                var mouseX = Event.pointerX(event)
                var mouseY = Event.pointerY(event)

                $('selector').setStyle({
                        position: 'absolute',
                        left: mouseX,
                        top: mouseY,
                        border: 'solid 1px pink',
                        visibility: 'visible',
                        width: '0px',
                        height: '0px'
                });

                Event.observe(document.body, 'mousemove', function(test) {
                        var mouseX2 = Event.pointerX(event);
                        var mouseY2 = Event.pointerY(event);
                        var cssLeft = mouseX;
                        var cssTop = mouseY;

                        var selectorWidth = (mouseX2 - cssLeft);
                        var selectorHeight = (mouseY2 - cssTop);
                        if (selectorWidth < 0) {
                                cssLeft += selectorWidth;
                                selectorWidth = selectorWidth * -1;
                                //alert(cssLeft + ' ' + selectorWidth);
                        }
                        if (selectorHeight < 0) {
                                cssTop +=  selectorHeight;
                                selectorHeight = selectorHeight * -1;
                                //alert(cssTop + ' ' + selectorHeight);
                        }
                        //alert(selectorWidth);
                        $('selector').setStyle({
                                left: cssLeft,
                                top: cssTop,
                                width: selectorWidth,
                                height: selectorHeight
                        });
                });
                //alert(Event.pointerX(event));
        });

        Event.observe(document.body, 'mouseup', function(event) {

                //Event.stopObserving(document.body, 'mousemove', 
function(event)
{});
                Event.stop(event);
                $('selector').setStyle({
                                        visibility: 'hidden',
                                        width: '0px',
                                        height: '0px'
                }); 
                  
        }); 
</pre>


--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "Ruby 
on Rails: Spinoffs" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at 
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply via email to