Drag and Drop Sortable List

Providing a clear and simple way for users to manage data is an every day task for most businesses. Below is an example of using AJAX to allow a user to graphically order the cities list by dragging and dropping particular cities in what ever order they want. Once a city is dragged and dropped a request is sent to server to update the positions of the cities in the database. The updated cities list is then sent back to the web page without the traditional full page refresh. This functionality is useful for moving data between multiple lists and prioritising daily tasks.

Favourite Cities

  • London position is 1
  • Munich position is 2
  • Dublin position is 3
  • Milan position is 4
  • Rome position is 5
  • Paris position is 6