you need to use some code that detects where the mouse is relative to the top left
corner of your box.
i've attached a modified version of my cell example that i've mentioned earlier and i
hope it can help
you.
Chris Casad wrote:
> Hello:
>
> I am trying to create a draggable box (rubberband effect) for a mapping
> application to allow the user to zoom into a map. I have the basic code to
> allow the user to draw a box but I am only able to draw the box in the
> positive x,y quadrant (lower right), for example, drag the cursor down and
> to the right. I need to be able to draw a box in all 4 quadrants, for
> example, drag the cursor up and to the left, up and to the right and down
> and to the left. I've tried a few things but just not getting it.
>
> I have an example at the following address as well as my code below:
> http://www.dubseestudios.com/dynapi.gui.draggablebox.html
>
> Thanks
> Chris
>
> ///////////////////////// CODE //////////////////////////////////
>
> <html>
> <title></title>
> <body>
> <p>
> <h3>dynapi.gui.draggablebox example</h3>
> </p>
> <p>
> <em>Drag you cursor to see a rubberband type box</em>
> </p>
> <p>
> <strong>Problem:</strong> Only able to draw box in the positive x,y
> quadrant (lower right), for example, drag the cursor down and to the right.
> Need to be able to draw box in all 4 quadrants, for example, drag the
> cursor up and to the left.
> </p>
> </body>
> <script src='/dynapi/src/dynapi.js'></script>
> <script>
> DynAPI.setLibraryPath('/dynapi/src/lib')
> DynAPI.include('dynapi.api.browser.js')
> DynAPI.include('dynapi.api.dynlayer.js')
> DynAPI.include('dynapi.api.dyndocument.js')
> DynAPI.include('dynapi.api.events.js')
> </script>
> <script>
> myLayerX1 = new DynLayer(null,null,null,null,null,'#000000','hidden')
> myLayerY1 = new DynLayer(null,null,null,null,null,'#000000','hidden')
> myLayerX2 = new DynLayer(null,null,null,null,null,'#000000','hidden')
> myLayerY2 = new DynLayer(null,null,null,null,null,'#000000','hidden')
>
> myListener = new EventListener(DynAPI.document);
>
> myListener.onmousedown=function(e) {
> myLayerX1.moveTo(e.getX(), e.getY());
> myLayerX1.setWidth(1);
> myLayerX1.setVisible(true);
>
> myLayerY1.moveTo(e.getX(), e.getY());
> myLayerY1.setHeight(1);
> myLayerY1.setVisible(true);
>
> myLayerX2.moveTo(e.getX(), e.getY());
> myLayerX2.setWidth(1);
> myLayerX2.setVisible(true);
>
> myLayerY2.moveTo(e.getX(), e.getY());
> myLayerY2.setHeight(1);
> myLayerY2.setVisible(true);
> }
>
> myListener.onmousemove=function(e) {
> if (myLayerX1.visible) {
> if (e.getX() >= myLayerX1.x) {
> myLayerX1.setWidth(e.getX() - myLayerX1.x);
> myLayerX2.setWidth(e.getX() - myLayerX1.x + 1);
> myLayerX2.moveTo(myLayerX1.x, myLayerX1.y +
>myLayerY1.getHeight());
> } else {
> // Negative x quadrant code
> }
>
> if (e.getY() >= myLayerY1.y) {
> myLayerY1.setHeight(e.getY() - myLayerX1.y);
> myLayerY2.setHeight(e.getY() - myLayerX1.y + 1);
> myLayerY2.moveTo(myLayerX1.x + myLayerX1.getWidth(),
>myLayerX1.y);
> } else {
> // Negative y quadrant code
> }
>
> myLayerX1.setHeight(1);
> myLayerY1.setWidth(1);
> myLayerX2.setHeight(1);
> myLayerY2.setWidth(1);
> }
> };
> myListener.onmouseup=function(e) {
> myLayerX1.setVisible(false);
> myLayerY1.setVisible(false);
> myLayerX2.setVisible(false);
> myLayerY2.setVisible(false);
> };
>
> DynAPI.onLoad = function() {
> DynAPI.document.addChild(myLayerX1);
> DynAPI.document.addChild(myLayerY1);
> DynAPI.document.addChild(myLayerX2);
> DynAPI.document.addChild(myLayerY2);
> DynAPI.document.addEventListener(myListener);
> };
> </script>
> </html>
>
> //////////////////////////////////////////////////////////
>
> _______________________________________________
> Dynapi-Dev mailing list
> [EMAIL PROTECTED]
> http://lists.sourceforge.net/lists/listinfo/dynapi-dev
--
Michael Pemberton
[EMAIL PROTECTED]
ICQ: 12107010
antcell.zip
