javascript drag, edit, resize and format multiple divs

Not sure if this is the best approach. Wysiwyg editor like TinyMCE perhaps can do this, but I didn't see how.

I need an expert in javascript, with some knowledge of CSS positioning issues. So, here is the idea:

Main goal: A customizabe, user-created business description mini-ad.

Main programming: javascript to edit, move, resize divs.

Section 1: The user design

1. The user fills out a form with 6 fields, text or image.

2. Each field will be stored in a div.

3. Each div can be edited using contenteditable to allow bolding, italic, underline, color, background color, and font size changes. No changes allowed to the actual words originally entered. An image in the div can be resized.

4. Each div is draggable and resizable. Text adjusts accordingly.

5. Each div originally is placed inside a large div with borders in a particular relative position to the others (ie the starting template format).

6. No divs can overlap.

7. 4 of the 6 divs are required to remain inside the large div (ie must be part of the mini-ad.) The other 2 are optional and will be deleted if left blank on the form.

8. The large div containing all 4-6 divs in the final format is resizable also (so that the divs all fit), with specific max dimensions.

Section 2: Saving the design.

The html code for the final mini-ad (ie the large div with all the divs inside) will need to be generated. I understand that innerhtml can be used for the main div to capture everything. However, this needs to be modified to include the proper positioning for each div relative to the outer div and, I guess, to each other. Positions can't be absolute/relative to the screen because the mini-ad format needs to be saved to a database field, and re-read by other users with different browsers, and screen sizes/resolutions.

I don't need a database or php set up for me. I just need the html and javascript code.

I know that the code for the contenteditable will be different between FF and IE. I think/hope I can handle that. My biggest concern is how workable the above Section 1 and 2 is in terms of dragging and saving a final format.

Thanks, I look forward to working with someone who KNOWS this can be done, and exactly how.

## Deliverables

I put above that the project doesn't include a database. What I meant was you won't have to create one for me. I will be putting the final formatted code for the mini-ad into a field in the MYSQL database on So, there is a database. I'll put it there, and then in my testing will read it and make sure it looks like it is supposed to.

However, you'll need to have one for yourself to test it to make sure the field you prepare for it is correct. Sorry, I didn't mean to be unclear on that.

Habilidades: Engenharia, Javascript, MySQL, PHP, Gestão de projetos, Arquitetura de software, Teste de Software, Hospedagem Web, Gestão de Site , Teste de Website

Veja mais: resize multiple divs relative, wysiwyg html 5, test my javascript, resize image background, read it yourself, programming text editor php, programming text editor, programming javascript, programming in javascript, javascript edit code, html editor programming, html code for javascript, html 5 with javascript code template, html 5 javascript, editor position, edit html 5, div programming, database positions, best text editor for programming, best programming text editor, best programming font, best programming editor, best php editor, best font for programming, javascript resize multiple div drag

Acerca do Empregador:
( 6 comentários ) United States

ID do Projeto: #3000889

Concedido a:


See private message.

$595.01 USD em 14 dias
(39 Comentários)

5 freelancers are bidding on average $663 for this job


See private message.

$850 USD in 14 dias
(93 Comentários)

See private message.

$1020 USD in 14 dias
(36 Comentários)

See private message.

$425 USD in 14 dias
(5 Comentários)

See private message.

$425 USD in 14 dias
(8 Comentários)