4

jQueryを並べ替えることができるので、スクロールバーを強制する非常に長いリストがあります。これを行うのに十分な長さの場合は常に、アイテムを取得するたびに、ページが自動的にスクロールを開始し、LIがカーソルからジャンプします。短いリストを使用しているときはいつでも完全に機能します。何か助けはありますか？

現在のLICSS：

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

最初のドラッグをデバッグします！

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 に答える
1

ページ本体やその他の親ではなく、コンテナ自体をスクロール可能にする必要があります。そうしないと、スクロール位置が正しく計算されます。

于 2013-07-19T09:33:39.590 に答える
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 に答える