Question

使用jQuery可排序，我有一个非常长的列表强制滚动条。每当它足够长时间执行此操作时，每次我抓取一个项目时，页面会自动开始滚动并且LI跳出光标。每当我使用较短的列表时，它都能很好地工作。有什么帮助吗？

当前LI CSS：

min-height: 60px;
margin-top: 12px;
margin-bottom: 10px;
padding: 10px 10px 15px 10px;

background: #FAFAFA;

.roundCorners(3px);
.boxShadow(0,4px,10px,#222);

border: 1px #D4D4D4 solid;

当前的jQuery：

    var makeNotesSortable = function () {
        $("#notes").sortable
        ({
            update: function () {
                console.log($("#notes"));
                updateNoteOrder($("#notes"));
            }
        }).disableSelection();
    }

The LI to move jumps way off the cursor

Answer 1

@Kerry Ritter的答案是解决问题的正确方法但不要忘记通过添加：

修改#sortable元素的CSS

position: relative;

Answer 2

我找不到这个问题的解决方案，但是我转了滚动并将轴设置为'y'。

        $("#notes").sortable
        ({
            scroll: false,
            sort: function (event, ui) {
                ui.helper.css({ 'top': ui.position.top + $(window).scrollTop() + 'px' });
            },
            helper: 'clone',
            axis: 'y',
            update: function () {
                updateNoteOrder($("#notes"));
            }
        }).disableSelection();

Answer 3

调试第一次拖动！

jQuery(".sortable").sortable({

    axis: "y", 
    containment: "parent",
    scroll: false,
    handle: ".handle",
    tolerance: "pointer",

    create: function (event, ui) {
        this.first_drag_debug = true;
    },
    sort: function (event, ui) {
       if ( this.first_drag_debug == false ) {
         ui.item.css( 'top', ( ui.position.top + jQuery(window).scrollTop() ) + 'px');
       }
    },
    change:function(event, ui){
        this.first_drag_debug = false;
    },
    stop: function(event, ui){ 
        this.first_drag_debug = false;
    },
    update: function(){ 
        update(); 
    },

});

Answer 4

您需要使容器本身可滚动，而不是页面主体或任何其他父项，然后将正确计算滚动位置。

Answer 5

我知道这是一个老问题，但这是我如何通过页面上的多个滚动元素来解决此问题：

$("ul.reorder").sortable({ 
    axis: 'y',
    containment: 'parent',
    tollerance: 'pointer',
    cursor: 'move',
    sort: function(event, ui) {
        var $target = $(event.target);
        if (!/html|body/i.test($target.offsetParent()[0].tagName)) {
            var top = event.pageY - $target.offsetParent().offset().top - (ui.helper.outerHeight(true) / 2);
            ui.helper.css({'top' : top + 'px'});
        }
    }
});

JQuery可以滚动排序

5 个答案: