4

使用 jQuery 可排序，我有一个很长的列表，它强制滚动条。只要有足够长的时间来执行此操作，每次我抓取一个项目时，页面都会自动开始滚动，并且 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();
    }

LI 移动跳出光标

4

5 回答 5

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();
于 2012-07-09T13:38:54.033 回答
2

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

position: relative;
于 2017-03-07T09:41:11.557 回答
1

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

于 2013-07-19T09:33:39.590 回答
1

调试第一拖！

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

});
于 2013-04-18T13:40:38.083 回答
0

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

$("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'});
        }
    }
});
于 2020-11-19T18:52:34.587 回答