jQuery Droppable / Drag and Drop selection into MySQL DB

I need to complete the following module of a project where the jQuery Droppable items (images) will be loaded from a MySQL database and the user selection will be stores as a string in another table of the database.

Using the example file in this link (Droppable page):

jQuery Droppable: [login to view URL]

Elements:

-Tables (no need to provide this):

- shops: Contains three columns: id, shop_name, logo

- authenticate: contains a column called "username", a column called "u_id_shops" id's of selected elements will be stored and another column called "u_id_nshops" where the non-selected id's will be stored. In both cases the values should be stored as string with the format "1,3,6,5....." where each number represents the id of a shop in the "shops" table.

-Droppable page

Requirements:

- When the Droppable page is loaded this should check the table "authenticate" for a predetermined selection in the column "u_id_shops" and "u_id_nshops" for the current username.

- If there is a predetermined selection then its respective id's should be pulled from the "shops" table and added as elements into the <div id="trash" class="ui-widget-content ui-state-default"> section. The id's in the authentication table ("u_id_nshops") should also be loaded but these into the <ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">. After loading the preselected items, every new dragging and dropping should update the id records in both "u_id_shops" and "u_id_nshops" of the authenticate table for the current username.

- Else, If there is no previously stored selection in either "u_id_shops" and "u_id_nshops", then all shops should be loaded from the "shops" table into the <ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">. Every dragging and dropping should update the id records in both "u_id_shops" and "u_id_nshops" of the authenticate table for the current username.

All draggable elements should look like this and not like the example given above:

<li class="ui-widget-content ui-corner-tr">

<h5 class="ui-widget-header">NAME TO BE PULLED FROM THE shops TABLE</h5>

<img src="PAD TO BE PULLED FROM THE shops TABLE" alt="SHOP NAME" width="96" height="72">

<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>

</li>

Thanks in advance,

HTML jQuery / Prototype MySQL PHP

Ταυτότητα Εργασίας: #5373242

Σχετικά με την εργασία