In Progress

538082 jQuery Drag / Drop / Move blocks in layout

In an existing grid page layour (using divs and not table format), I want to add the following features (Please see the attached screenshots):

1.- Add a tab plugin (better the one that I'm currently using), with two tabs.

2.- The first tab is named Widgets. What I want there. Using PHP/MySQL to read all the rows of a specific table, and for eash row to add in the tab a brick. The fields that you will use are: id, title, photo. As you can see in the tab_widgets screenshot each brick has a title, and (attention to it), on mouseover I want to show the image (the value is stored in the database). This way the user will be easily understand if the content is short or wide.

After this clarification, the features that I want are:

- Drag and Drop to a block

- Move from block to block

- Move inside the same block (changing order)

- If the user drops it outside the layout, then the brick to return back to the container (tab).

- Another important point is that widgets are used only once. So if the user puts it to a block, then the brick to disappear from the containter (tabs).

- While in the container the content appears only as popup on mouseover, when the user drops it to a block, I want there the image to be resized and shown below the title.

3.- The other tab is named Objects and it will has 6 Objects (sorry if in the screenshoot appear only 5). Just keep in mind that unlike widgets where each widget can be used once, the objects can be use multiple times). These objects are:

3a: Tab object. By placing it on a block should be 2 tabs available, but I want the ability the user to add/remove tabs. The user will set title for each tab, and then he will move widgets there. Each tab can has only one widget.

3b: Vertical Menu supporting one level of submenus. The user will add a Title and a link.

3c: Accordion. Should works as the tab object. Only widgets can be placed there and only one widget per section. Ability to add/remove accordion sections.

3e: Image uploader. The uploaded image should be resized according to the blocks width keeping the height ratio.

3f: YouTube video object. Using the player that I'm already using.

3g: Simple Notepad block where the user can post comments (something like Facebook). The first 30chars will appear as title. Ability to delete a note. No editing.

For objects the same rules as widgets apply (eg moving them, or dropping out of the grid).

4.- Save layout. You'll save the layout code adding widgetX where X is the widget id. If the layout has objects, then you need to save all needing code PLUS widgetX. On runtime I'll replace this variables with the necessary code.

5.- Edit Layout. Restore the saved layout and have it available for editing (eg moving widgets/objects, or removing them).

Skills: Anything Goes, Editing, Facebook Marketing, Javascript, jQuery / Prototype, MySQL, PHP, Social Networking, YouTube

See more: jquery grid layout drag drop, jquery drag drop layout, jquery drag keep table format, video editing works, video blocks, notepad image, link jquery, grid in php with add edit delete, container in c, moving blocks jquery, drag drop blocks grid jquery, remove object from photo, jquery back, jquery link, video an photo edit, screenshot editing, remove object, plugin jquery, php mysql javascript jquery, jquery image

About the Employer:
( 25 reviews ) Lagadas, Greece

Project ID: #2284022