Fields where the "id" fo the selected photo is added for sending:

 
Photo 1:   Photo 2:   Photo 3: 
		

The idea of this script is to allow keyword (tag) searches for images in a database
and then be able to drag them to boxes to be included in an article.
This script could be used, for example, for a blog or a CMS (content management system).

This is the basic process:

1. Search for photos using one of the following keywords:.
       "people", "scene", "house", "number"
2. The photos are extracted dynamically using AJAX from the database.
3. Use the arrows to slide up and down through the list of fotos.
4. Drag the selected photo to one of the boxes above.
5. The "id" of the selected photo is written to a hidden form field for proccessing
6. We can only have 1 photo per box.

This script is a combination and adaptation of 3 scripts

• Ajax search (no specific script)
• Custom Drag & Drop
• Image Slideshow with Verticle Filmstrip

Here is the zip file of the whole working proccess. It contains the following files:

• index.html
• ajax.php *
• css/style.css
• js/drag-drop-custom.js
• js/image-slideshow-verticle.js
• * for the demo this file uses an array of images - this will need to be modified to get the images from your database.

Thanks to Batalf for helping me out with this script adaptation.

NB. Although these scripts have been modified, use of this script must abide to the dhtmlgoodies terms of use