Drag and Drop UI layouts using jQuery

For our next project (a small app in ASP.NET/C#) we have to create drag and drop zones in the UI so that components/widgets can be dragged and dropped and layouts can be changed dynamically (for example, the user should be able to switch between two-column to a three-column layout from the front end).

After doing some searching, I got to know that there are two approaches:

1. Use Web parts and Content-zones.

2. Using jQuery.

I also learnt that jQuery approach is pref开发者_如何转开发fered, but I would like to know how can I create such zones in my application and also save these zones per user (in the D so that when the new request comes for that user their preferred layout is displayed? I basically want to know if there are some tutorials on creating persistable drag and drop zones using jQuery.

Thanks,

Mohit Kumar

I don't know my answer would be useful to you or not. Please correct me if I am wrong.

You can use :

• 1) jQuery Drag & Drop Plugins,
• 2) DRAG-AND-DROP

for this issue.

As other answers suggested use draggable & droppable from the jQuery API.

Here is an example how to actually do the post and save the layout. Server side saving is in the example done in php, but it can any other language also.

There is a JavaScript function called updateWidgetData() that you might like to investigate. It collects all the information to the array and uses $.post to send the array.

you can use draggable() and droppable methods of jquery.

see this reference