Drag And Drop Icons Onto An Image, Jquery, Ajax, Php, Mysql


We are looking for a drag and drop page created that enables us to place small images on a line drawing of a human body, this image will be provided to you.

There will also be a selection of smaller icons that can be dragged and dropped onto the above line drawing, these smaller icons will be transparent .png files and will be provided to you.

There could be up to 20 different small icons that can be applied to the line drawing and there should be no limits on the number of icons that can be applied to the line drawing, in addition they should also be able to be overlaid on top of each other.

Te user can select any number of shaped icons on the right hand side and drag them to exact locations onto the line drawing, in addition, each of the icons on the right hand side should be able to be used multiple times, for example they may want to use the smallest box 6 times on the line drawing.

The user should be able to remove, if required, the smaller icons from the line drawing by selecting them and dragging and dropping them back to the right hand side.

When the user is happy that they have added the required icons onto the line drawing they give the line drawing a title and save, it is now that the code will store the co-ordinates of each of the icons they added onto the line drawing into the database, the user will then be taken to an overview page of all previously created drawings.

They can now click on any of these titles to display them where they can edit the line drawing, ie: add or remove icons etc.


The final code you produce must work flawlessly in the following browsers:

Internet Explorer from versions 7 to 9 without compatibility mode switched on.
FireFox from versions 3.6 to version 9.01
Safari – Current release
Chrome – Current release

In addition it must also work on an iPad and iPhone using the Safari browser and also Android phones and tablets using the default browser and Firefox.

Please ensure you have the experience to write this code so that it works in all the browsers listed above, please also ensure you have tested your code in all of these browsers before you release it to us, if you are unable to test in any of the browsers listed above please let us know and we will test it for you and report back to you, however, we will not accept your code or pay for it until it works perfectly in all the browsers listed above.

How you code this project is your decision, however, it must NOT be written using FLASH as the iPad and iPhone do not support flash, when coding be aware of the browser requirements above and the following:

i. This project will be used on a linux server
ii. The back end should be coded using .php
iii. The storage of the co-ordinates of the dropped images should be stored in a mysql database

We do NOT pay or release any money up front, we do NOT pay milestones, we pay 100% on completion of the project and always have done, we have been burnt in the past by unscrupulous Freelancers and for this reason only pay on completion of the project.

If you are not happy with this do NOT bid.

Only bid if you are 100% sure you can meet the requirements of this project because if the project is not completed as per our specification we will NOT pay you and will find someone else to do the work.

Check our feedback on Freelancer and you will see that we pay for every project we submit, we are based in the UK and are trustworthy.

You have just 7 days to complete this project from the date we accept you, if you cannot complete within 7 days please do NOT bid, we need this project completed urgently.

Search All Jobs:

Job Details

  • Job Type
  • Fixed Price Job
  • Budget
  • $30-$250
  • Start Date
  • 01/14/2012 01:29:32 AM
  • Job Status
  • Job Expired