jQuery可排序列表 – 排序时滚动条跳转

首先让我们来设置场景。你有一个排序元素的列表，你的页面比你的屏幕高，所以它有一个滚动条，你的页面在最底部，滚动条一路下降。

问题，你去拖动一个元素，导致jQuery从dom中删除它然后添加一个占位符。让我们放慢速度，首先删除元素，现在列表更短，导致页面更短，导致滚动条更短。然后它添加占位符，现在页面更长，现在的滚动条更长(但窗口没有向下滚动回来，所以它看起来滚动条上升)。

最好的方法，我发现抵消这将是确保可排序列表有一个静态高度，所以删除一个元素不会导致它更短。这样做的一种方法是

create:function(){
    jQuery(this).height(jQuery(this).height());
}

以上将在可排序列表的创建时调用，将其高度静态设置为其当前高度。

如果您在某个可排序元素中有图片，上述代码将无法正常工作，除非您在标记中预先定义尺寸。原因是当调用和设置height()时，它是在图像填充之前计算的。没有维度，那么图像就没有空间。一旦图像加载，那么它将占用空间。

这里有一个必须定义维度的方法。只要在每次检测到要加载的图像时调整列表高度即可。

create:function(){
    var list=this;
    jQuery(list).find('img').load(function(){
        jQuery(list).height(jQuery(list).height());
    });
}

最终版本：

jQuery(document).ready(function(){  
    jQuery("div#todoList").sortable({
        handle:'img.moveHandle',opacity: 0.6,cursor: 'move',tolerance: 'pointer',forcePlaceholderSize: true,update:function(){
            jQuery("body").css('cursor','progress');
            var order = jQuery(this).sortable('serialize');
            jQuery.post("/ajax.PHP?do=sort&"+order,function(data){jQuery("body").css('cursor','default');});
        },create:function(){
            var list=this;
            resize=function(){
                jQuery(list).css("height","auto");
                jQuery(list).height(jQuery(list).height());
            };
            jQuery(list).height(jQuery(list).height());
            jQuery(list).find('img').load(resize).error(resize);
        }
    });
});