HTML iframe - Mini-browsers

I have a website which already allows users to upload images on the canvas The website was coded using HTML with some JS libraries like CanvasJS We are looking to add a few more features to the site: 1. A + button to let users add a draggable and resizeable iframe (a mini browser that allows users to type the URL and browse web) please check the following fiddle as a reference example. however it cannot be dragged or resized or rotated. [login to view URL] The example of mini-browser. But this should be draggable and resizeable across the canvas 2. Since the iframe mini-browser will render the URL site inside. the mini-browser should have a zoom in-out button to enable users to zoom in and out (with scrollbar enabled). If the users resize the main browser window, the position of the mini-browsers should NOT change (ABSOLUTE positioning) ************************ Key Deliverables: Milestone : 1. 50% Pay-out: - HTML page with a button to add mini-browsers - The mini-browsers will be added in the middle of the page - The mini-browsers should be draggable, resizeable, (and rotateable, if you are using CanvasJS) The top bar should have fixed size after resizing the mini-browsers 2. Remaining 50% Pay-out: - Similar CSS design and layout of the mini-browser as per the fiddle (code given) [Back/Forward, URL box, Refresh) - The zoom in/out buttons in each mini-browser (with scrollbar enabled if the users zoom in) Can be placed at the bottom right of each mini-browser or as deem fit - The absolute positioning of each mini-browser if the users resize the web browsers