我正在构建一个拖放日历,并发现jQuery UI的可排序为我正在尝试做的事情提供了最佳的现场表现.
但是,由于我的脚本正在应用所有这些可排序的实例,因此应用可排序到数月的数天(一次60到180天 – 有时更多)导致页面加载时明显滞后.它一旦加载就可以正常工作,但我宁愿没有最初的滞后.在某些情况下,浏览器甚至会尝试终止脚本.
我尝试将日历的第一天排序,然后使用jQuery的.clone()复制到所有其他日子,但不幸的是jQuery的.clone()似乎没有复制.sortable的事件.其他事件(如点击,双击等)可以很好地复制,但不能排序.在网上做一些研究,我所能找到的是jQuery“不支持克隆插件”的说法.
有一个更好的方法吗?我一直在搜索stackoverflow,jQuery UI的论坛和Google,并且没有找到任何帮助.
提前致谢,
火腿
编辑:这是一些代码.没什么特别的.
function sortableStop(event,ui) { // Saves to the DB here. Code removed - not relevant } $(".milestone-day").bind("dblclick",function(ev) { // Allows adding milestones. Code removed - not relevant }).sortable({ handle: '.handle',connectWith: '.milestone-day',items: '.milestone',stop: sortableStop });
标记看起来像这样:
<table> <tbody> <tr> <td><ul class="milestone-day"></ul></td> <td><ul class="milestone-day"></ul></td> <td><ul class="milestone-day"></ul></td> <td><ul class="milestone-day"></ul></td> <td><ul class="milestone-day"></ul></td> <td><ul class="milestone-day"></ul></td> <td><ul class="milestone-day"></ul></td> </tr> <tr> <td><ul class="milestone-day"></ul></td> <td><ul class="milestone-day"></ul></td> <td><ul class="milestone-day"></ul></td> <td><ul class="milestone-day"></ul></td> <td><ul class="milestone-day"></ul></td> <td><ul class="milestone-day"></ul></td> <td><ul class="milestone-day"></ul></td> </tr> ... </tbody> </table>
里程碑是li元素通过ajax加载到他们适当的里程碑日uls.
编辑2:工作演示发布:
http://www.clearsightstudio.com/demos/calendar-load/
编辑3:演示消失了.抱歉.
请注意,打开页面时会出现延迟.在我的实际应用程序中,有比实验更多的内容,所以滞后更加明显.
解决方法
调用sortable()之后调用connectWith,例如:
$('.whatever').sortable().sortable( "option","connectWith",'.whatever' );
出于某种原因,它在我的场景中提高了性能(数千个元素)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。