logo标签列表

JQuery UI可排序的滚动容器 - 排序时滚动位置“跳跃”

javascriptjqueryjquery-uijquery-ui-sortable
8
请先查看这个几乎相同的问题: jQuery可排序列表 - 排序时滚动条跳跃
我有完全相同的问题，只是我尝试了那里提出的所有建议，但都没有成功。
以下是重现方法：
- 创建一个可排序列表 - 使其可滚动 - 向下滚动 - 重新排序项目 - 滚动位置会“跳跃”
以下是代码（也可以在JSFiddle中查看）
Html
<ul id="panel" class="scroll">
    <li class="content" style="background-color:red">item1</li>
    <li class="content" style="background-color:green">item2</li>
    <li class="content" style="background-color:blue">item3</li>
    <li class="content" style="background-color:gray">item4</li>
    <li class="content" style="background-color:yellow">item5</li>    
</ul>​

JavaScript

$(function() {
    $("#panel").sortable({
        items: ".content",
        forcePlaceholderSize: true
    }).disableSelection();
    $(".content").disableSelection();

});​

CSS

.scroll{
    overflow: scroll;
    border:1px solid red;
    height: 200px;
    width: 150px;
}
.content{
    height: 50px;
    width: 100%;
}
​

在尝试接受的答案（没有成功）后，这是代码（在JSFiddle中）。

我可以尝试理解为什么会发生这种情况（列表会“缩短”一秒钟），但是使用占位符或助手来避免它的所有尝试也都失败了。我感觉我已经尝试了几乎所有的“可滚动”选项，但是都没有成功。

我尝试过的浏览器

IE9，Firefox 10.0.1和Chrome 17

JQuery版本

核心1.7.1，UI v 1.8.17

我做错了什么吗？有解决方案吗？可能是一个错误吗？

6个回答
5
如果您通过添加以下内容来修改.scroll元素的CSS：
position:relative;

这应该解决这个问题。

2
不错！它解决了最底部项目的问题，但其他项目似乎仍然存在问题。http://jsfiddle.net/Fnncs/4/ - Eran Medan
2

对于我来说，即使没有 height 属性，将 overflow-y:scroll 添加到可排序列表中也可以解决问题。它只显示一个禁用的滚动条，但这没关系。

2

当您向下滚动时，可以按照以下方式操作。

var cY = -1;
var base = 0;
$("").sortable({
  sort: function(event, ui) {
    var nextCY = event.pageY;
    if(cY - nextCY < -10){
      if(event.clientY + ui.helper.outerHeight(true) - 20 > document.body.clientHeight) {
        base = base === 0 ? event.clientY : base;
        var move = event.clientY - base;
        var curScrollY = $(document).scrollTop();
        $(document).scrollTop(curScrollY + move+3);
        base = event.clientY;
      }
    }
  },
  // .....
});
1
问题非常明确。你用非英语语言写了答案。 - Omar Tariq
2
由于我无法书写英语，以下是关于编程的相关内容的翻译。 - Kwan Ung Park
1

看起来 jQuery UI 1.9.2 解决了这个问题。

如果您无法更改库，则可以使用包括简单滚动条操作的解决方法。思路很简单：

  • 每次滚动时保留先前的滚动位置。
  • 当您开始拖动元素时，将滚动设置回先前的位置。

就是这样；

var lastScrollPosition = 0; //variables defined in upper scope
var tempScrollPosition = 0;

window.onscroll = function () { // Up to you requirement you may change it to another elemnet e.g $("#YourPanel").onscroll
    clearTimeout($.data(this, 'scrollTimer'));
    $.data(this, 'scrollTimer', setTimeout(function () {
        tempScrollPosition = lastScrollPosition; // Scrolls don't change from position a to b. They cover some numbers between a and b during the change to create a smooth sliding visual. That's why we pick the previous scroll position with a timer of 250ms.
    }, 250));

    lastScrollPosition = $(document).scrollTop(); // Up to you requirement you may change it to another elemnet e.g $("#YourPanel").onscroll
};

$("#YourSortablePanel").sortable({
    start: function (event, ui) {
        $(document).scrollTop(tempScrollPosition);
    }
});
0
0

对我来说，如果您不想从body中删除overflow css，则这些可排序选项将起作用：

    start(e, ui) {
      if (fixOffset) ui.item.css('transform', `translateY(${document.body.scrollTop}px)`);
      fixOffset = true;
    },
    change(e, ui) {
      ui.item.css('transform', `translateY(${document.body.scrollTop}px)`);
    },
    stop(e, ui) {
      ui.item.css('transform', 'translateY(0)');
    },
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接