How to organize products into categories using AJAX drag & drop

If you are dealing with categories (authors, artists, departments etc.) and items (books, music albums, employees etc.), and you want to associate them accordingly as quickly as possible, you can do it in browser, without manually editing the database records or the database script. The changes will be automatically updated in the database. To learn how to do this, follow the instructions below.

First of all, set up the Dreamweaver environment (steps 1-3), and then add the AJAX drag & drop feature:

1. The database used in this tutorial has two tables (the names of the table columns are more than suggestive):

2. 1. category_ctg, that has two columns: id_ctg and name_ctg.

   2. product_prd, that has four columns: id_prd, idctg_prd (ID of the category to which the product belongs), name_prd, and price_prd.

3. • Create its structure by using the scripts provided in the .zip package (either .sql or .mdb), in the \tutorials\Drag and drop\db folder.

2. Create a new page in one of your sites (used for testing/learning), in the root, and name it drag_drop.

3. Open the drag_drop file and define a new Dreamweaver database connection: conn_drag_drop. Configure it to connect to your database server and make it point to the database containing the tables described above.

4. Once the needed file and the database connection are created, launch the AJAX Drag and Drop Wizard. The wizard has two steps.

5. Configure the first step of the AJAX Drag and Drop Wizard as shown below:
   
   
                                          

6. • Select the conn_drag_drop database connection.

   • Select the category_ctg table as the categories one.

   • Select the id_ctg column as the primary key of the categories table.

   • The category label is given by the name_ctg column.

   • Select the product_prd table as the items one.

   • Select the id_prd column as the primary key of the items table.

   • As the foreign key, select the idctg_prd table column that links each item to its category.

   • The item label is given by the name_prd column.

   • Click Next to continue configuring the wizard.

6. Configure the second step of the AJAX Drag and Drop Wizard as shown below:
   
   
                                         

7. • Check the Display unassigned items option.

   • Do not check the Enable ordering option.

   • Click Finish to apply the wizard.

7. In the page translator (illustration corresponding to the code block behind the action), replace the product_prd label (it appears twice) with Products, and the category_ctg label (it appears twice) with Category.

Save, upload, and preview the drag_drop page in browser:

Notice that all the items having the foreign key either NULL or 0 are displayed in the unassigned items group. You can drag each unassigned item and drop it into the corresponding category. In the same way you can move items from one category to another. When items are dropped in a new category, the foreign key is automatically updated in the database table (check this for yourself!).

Note: A situation in the which the AJAX drag & drop feature for classifying would be really useful is when none of the items are associated with a category (all items are unassigned). Instead of manually editing the database records or the database script to set the foreign key value, you can simply drag & drop items to their category.