我正在构建一个拖放日历,并发现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:演示消失了.抱歉.