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
