jQuery 插件支持拖放列表并限制列表长度？答案

【问题标题】：jQuery plugin that supports drag-n-sort list with deletion and limit on list-length?jQuery 插件支持拖放列表并限制列表长度？
【发布时间】：2011-03-24 23:42:59
【问题描述】：

我正在为一个网站构建一个功能，让用户可以

输入一个字符串并将该字符串作为项目添加到列表中
通过上下拖动项目对列表进行排序
从列表中删除项目
强制限制列表的长度。例如，假设我想将每个列表限制为 10 项或更少。如果用户尝试添加不应被允许的第 11 项。
向后端服务器/数据库传达操作：每当添加、删除或拖动元素到列表中的不同位置时，都需要将该信息发送回后端服务器/数据库

我查看了jQuery UI Sortable 插件，但它并没有真正满足我的需求。有没有 jQuery 插件可以做到以上 5 件事？

如果我需要修改jQuery UI Sortable（或类似的东西）来做我需要的，我该怎么做？我对此很陌生，因此非常感谢任何帮助。

我更喜欢 jQuery，因为我已经在这个项目中使用了它。但是，如果其他一些库更适合此目的，我也很想听听。

谢谢。

【问题讨论】：

标签： jquery ajax jquery-ui jquery-ui-sortable

【解决方案1】：

所有这些都可以通过 jQuery-ui 可排序列表以编程方式完成。您可以加入不同的事件。例如，您想挂接到列表上的update 事件以将订单发送到后端服务器，并使用可排序的serialize() 方法来呃...序列化列表的订单。像这样：

$('ul#my-list').sortable({
  update: function(event, ui) {
    $.post(
      '/url/to/your/server',
      $(this).sortable('serialize')
    );
  }
});

这只是示例代码，因此您必须对其进行调整以使其满足您的需要。

要删除列表中的项目，只需在每个元素上添加某种删除按钮，然后将其从 DOM 中删除即可：

<ul id="my-list">
  <li>item 1 <a href="#" class="delete">X</a></li>
  <li>item 2 <a href="#" class="delete">X</a></li>
</ul>

$('ul#my-list a.delete').live('click', function(e) {
  $(this).parent().fadeOut().remove();
  e.preventDefault();
});

至于向列表中添加项目，有很多方法可以做到这一点，我会留给你，因为我觉得我已经写了足够长的时间了:)

【讨论】：