JQuery 可滚动排序答案

【问题标题】：JQuery Sortable with ScrollingJQuery 可滚动排序
【发布时间】：2012-07-06 16:02:56
【问题描述】：

使用 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();
    }

【问题讨论】：

标签： jquery jquery-ui-sortable

【解决方案1】：

我找不到此问题的解决方案，但我关闭了滚动并将轴设置为仅“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();

【讨论】：

【解决方案2】：

@Kerry Ritter 的回答是解决问题的正确方法但不要忘记通过添加以下内容来修改#sortable 元素的CSS：

position: relative;

【讨论】：

【解决方案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(); 
    },

});

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案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'});
        }
    }
});

【讨论】：