javascript/jquery/mootools/other js lib- how to enable user to add a div to an existing web page

Question

I am working with a web page, and showing it in a html editor.

What I wan to do is, allow the user to dynamically define a new div within that html page, by dragging the mouse across the page- the page is being shown in a WYSIWYG Editor like CKEditor or TinyMCE...and the div is created, and code is inserted within the html of the page for that div.

I have no restriction with ref to using a specific javascript library- I am ok with use of jquery or mootools or any other library.

How do I even start thinking of implementing such a requirement? How do I show a rectangle on the screen which is resizable, and when user is done dragging and he clicks the mouse, then a new div of the size of the rectangle is created? Can this be done using relative width/height? Or will this necessarily require fixed width/height?

Any pointers would be helpful for me...

Answer 1

I'd probably use jQuery UI's resizeable. When they click to add a div, append a new div on the page. $('<div></div>').resizable().appendTo(parent) . You should prob keep a reference of everything you've added to the page for saving it later.