使用jQuery拖放UI布局

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).

为我们下一个项目(一个小应用ASP.NET/C #)我们必须创建拖放区在UI组件/部件可以拖拽和布局可以动态地改变(例如,用户应该能够切换两列一个三列的布局从前端)。

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

在搜索之后，我发现有两种方法:

Use Web parts and Content-zones.

使用Web部件和内容区。
Using jQuery.

使用jQuery。

I also learnt that jQuery approach is preffered, 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.

我还了解到jQuery方法是预先给出的，但是我想知道如何在我的应用程序中创建这样的区域，并为每个用户保存这些区域(在D中，以便当该用户的新请求到来时，显示他们首选的布局?我主要想知道是否有关于使用jQuery创建可持久化拖放区域的教程。

Thanks,

谢谢,

Mohit Kumar

Mohit库马尔

3 个解决方案

#1

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,
1) jQuery拖放插件
2) DRAG-AND-DROP
2)拖放

for this issue.

对于这个问题。

#2

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

正如其他答案所建议的，使用jQuery API中的draggable & droppable。

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.

下面是一个如何实际执行post和保存布局的示例。服务器端保存在php中完成的示例中，但是它也可以保存任何其他语言。

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.

您可能希望研究一个名为updateWidgetData()的JavaScript函数。它将所有信息收集到数组并使用$。发送数组。

#3

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

您可以使用jquery的draggable()和droppable方法。

see this reference

看到这个参考

#1