在洗牌后在屏幕上保留位置

我有很长的物品清单，点击物品时可能会将其他相关物品移动到正下方。问题在于，如果移动的项目出现在被点击的项目上方，则该移动导致页面向上滚动并且鼠标不再位于用户的焦点中心上方。例如在洗牌后在屏幕上保留位置

项目1
项目2
项目3 - 点击这条1/1移到它的下方
项目4

点击后：

项目2
项目3
项目1 - 现在以下项目3已经切换了画面（坏）
项目4

做jQuery中招我使用$（ '＃物品1'）insertAfter（ '$项目3' 上。）; 如何让Item3保持与窗口顶部相同的位置？

编辑：基于帕特里克 - DW的回答修改的方案，保持鼠标/屏幕位置正好在点击的产品：

var pos = $('#item3').offset().top; 
$('#item1').insertAfter($('#item3');  
pos = pos - $('#item3').offset().top; 
// it may not have scrolled if the shuffling happened entirely below it 
if (pos > 0) $(window).scrollTop($(window).scrollTop() - pos);

来源

2010-10-19 Jacob

假设有空间可以滚动，你应该可以做类似的事情。

$('#item1').insertAfter('#item3'); 
$(window).scrollTop($(window).scrollTop() - $('#item3').outerHeight());

这调整由的item3的outerHeight的量scrollTop位置。

因为对于.scrollTop()值代表隐藏在顶部的像素数，我们减少了隐藏垂直像素数，以滚动页面向下返回#item3到原来的位置（或接近）。

来源

2010-10-19 18:58:39 user113716

谢谢，这工作得很好。需要修改的情况下，项目被移动的项目被点击（在这种情况下，我什么都不做），但我可以管理。 – Jacob 2010-10-19 22:31:37

看一看的scrollTo插件。你可以在点击一个列表项后调用它。

来源

2010-10-19 18:38:10

在洗牌后在屏幕上保留位置

回答

相关问题