Javascript 拖放以重新排序 HTML 列表

Drag and drop to reorder HTML lists

提问by nornagon

I have an app for which I would like to be able to drag and drop to reorder and arrange colours into groups. jQuery's sortablefor grids seems rather unresponsive and a little buggy. microjsrecommends kbjr's DragDrop, but that library has no concept of lists, only movable objects. Sproutcorehas a nice implementation, but I can't find a demo of it working for a grid.

我有一个应用程序，我希望能够对其进行拖放以重新排序并将颜色分组。jQuery对网格的排序似乎反应迟钝，而且有点问题。microjs推荐kbjr 的 DragDrop，但该库没有列表的概念，只有可移动的对象。Sproutcore有一个很好的实现，但我找不到它在网格上工作的演示。

My UI looks like this:

我的用户界面如下所示：

and I'd like users to be able to drag colours around within the groups as well as drag them between groups.

我希望用户能够在组内拖动颜色以及在组之间拖动颜色。

回答by Farhadi

Try this: HTML5 Sortable. It is a jQuery plugin to create sortable lists and grids using native HTML5 drag and drop API.

试试这个：HTML5 Sortable。它是一个使用原生 HTML5 拖放 API 创建可排序列表和网格的 jQuery 插件。

回答by ahmohamed

Just a friendly update, since this question came up in the search. HTML5Sortable is no longer maintained. The recommended library is Sortable. Size: 12kb minified.

只是一个友好的更新，因为这个问题出现在搜索中。HTML5Sortable 不再维护。推荐的库是Sortable。大小：12kb 缩小。

Code:

代码：

var sortable = Sortable.create($('#items'));

Hope this help the next wanderer.

希望这对下一个流浪者有所帮助。

回答by adrianthedev

I found out that this(Nastable) is a little bit more usefull for it has nesting capabilities.

我发现这个( Nastable) 更有用一点，因为它具有嵌套功能。

UpdateActually ended up using thisplugin with more options.

更新实际上最终使用带有更多选项的这个插件。

Hope it helps. Cheers!

希望能帮助到你。干杯!