Draggable and Resizable Objects in BlueBox2.0

This week I want to share a new LGPL library we have used in a few BlueBox2.0 projects, by Angus Turnbull, TwinHelix Designs, http://www.twinhelix.com.

The use of this new function is to allow certain elements in your pages to be draggable and resizeable.

The small javascript library/function is called dragresize() and we have formalised it into BlueBox2.0 as follows:

To load it in your page, simply call the function inline with one of your print/resp statements as follows:

resp("

           " . dragresize("drag_me",0,0,0,0,2000,2000) . "

            <div class=drsElement style=\"position:absolute;top:200;left:200;background:silver;width:400;height:400;\">

                <div style=\"overflow:auto;width:100%;height:100%;\">

                <img src=http://www.blueboxonline.com/portal/img/2011/banners/jpegs/Specific-Product-Focused.jpg>

                </div>

            </div>

            ");

The important bits here are:

• dragresize("drag_me",0,0,0,0,2000,2000) where the 'drag_me' is a future-placeholder for scalability when this function will work for specified objects on the page, currently no used, but required. The numbers following that are max-width, max-height, left-threshold, top-threshold, right-threshold, and bottom-threshold.
•  and, all elements which you want resizable must be set with class=drsElement (for now, until we get the function to isolate to certain objects.)
• and finally, the elements which are resizable must be set with style-position of absolute or relative.

This example prints a floating box to the screen which, when clicked renders eight handles which allow you to resize the box, revealing less or more of the background image.

Currently our implementation of dragresize is for resizing only, and will only allow you to specify one set of parameters for the page. However, you can set an unlimited number of elements as class=drsElement, which will make them all resizeable.