jQuery 可排序待办事项列表
我正在尝试建立一个待办事项列表。 http://d2burke.com/exp/todo/
我希望我的用户能够标记项目完成后，该项目将下拉至“完成”列表，反之亦然。我还希望每个列表都可以独立排序。
我使用基本的自定义方法来来回移动项目，并使用 jQueryUI Sortable 对它们进行排序。
所有这些事情我都已经完成了；然而，站点（DOM？）似乎并没有注册项目已从一个列表移动到另一个列表。如果我将一项标记为“完成”，它实际上会向下移动...并在“完成”列表中变得可排序，但我会以序列化格式回显当前位置（因为我将在db) 并且应用程序似乎无法识别该项目已移动。
当项目标记为完成或不完整时，我想强制应用程序重新计算项目列表。
帮助？
I'm trying to build a todo list. http://d2burke.com/exp/todo/
I want my user to be able to mark items as complete, at which point the item is dropped down to the 'Complete' list, and vice versa. I also want each of these lists to be independently sortable.
I'm using a basic custom method to move the items back and forth, and I've used jQueryUI Sortable to sort them.
All of these things I've been able to accomplish; however, it doesn't seem as though the site (the DOM?) is registering that the items were moved from one list to the other. If I mark one item as 'Complete' it physically moves down...and becomes sortable in the 'Complete' list, but I'm echoing out the current positions in serialized format (because I'm going to record the order in a db) and the app doesn't seem to recognize that the item has moved.
I'd like to force the app to recalculate the list of items when an item is marked complete, or incomplete.
Help?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我觉得你应该看看可排序的 resfresh 方法： http://jqueryui.com/demos /sortable/
我也会从 .refresh() 开始，看看是否也会重新计算位置。我认为确实如此，但如果没有，您可能还需要触发另一个。
I looks to me like you should look at the resfresh methods of of the sortable: http://jqueryui.com/demos/sortable/
I would start with .refresh() too see if that also recalculates the positions. I assume it does but if not you might need to trigger the other one too.
有几件事我要评论：-
1）当你“移动”一个项目时，你移动的次数超出了你的预期 - 移动的项目周围有一个“tbody” - 你的代码非常脆弱，具体取决于在parent.parent...维护起来将是一场噩梦。
2）您有各种parent.parent构造 - 将这些开关丢失到'.closest()'以在树中搜索您想要操作的项目类。
3）你正在做绑定/取消绑定的事情 - 丢失它们并切换到'$(document.body).on(,...)'然后jquery将根据你的选择器自动添加/删除事件 - 链接一次然后忘记。
完成此操作后，错误可能会消失 - 如果没有，它仍然会更清晰，以便可以正确调试！
问候
。如果是我，我想我会链接两个列表，以便它们可以一起排序，并在将项目从一个列表移动到另一个列表时切换已完成标志。
这样，用户就有两种方法来更改状态，并且 jquery 将完成所有的工作，就像您只是对普通链接列表进行排序一样。
There are few things that stand out that I would comment on:-
1) When you 'move' an item, you are moving more than you intend - the moved item has a 'tbody' around it - your code is very fragile, depending on parent.parent... which will be a nightmare to maintain.
2) You have various parent.parent constructs - lose these switch to '.closest()' to search up the tree to the class of item you wan to operate on.
3) You are doing things with binding/unbinding - lose them and switch to '$(document.body).on(,...)' then jquery will add/remove events automatically based on your selector - link once and forget.
Once this is done the bugs may go away - if not it will still be clearer so possible to debug properly!
Regards
ps. If it were me, I think I'd link the two list so they are sortable together, and toggle the completed flag if an item is moved from one list to the other.
This way the user has two ways of changing the status and jquery will do all the donkey work as you are simply sorting a normal linked list.