Question

How can I implement a javascript which gives the client option to drag various boxes from the selection and place it in the screen?

My primary goal is to let user design the interface by placing various boxes in the screen where they want to place it and save it so that they can log in later to see their screen.

Answer 1

Use jquery ui draggable and droppable for drag and drop.

For saving, you can iterate through the dropped elements and save their position, other attributes etc. For example, if all your dropped elements have the classed ‘dropped’, you can do something like:

$('.dropped').each(function() {
  // save position and other attributes of $(this) as needed
});