jquery-ui.sortableでドラッグ中の要素の位置がおかしくなる


jQuery-UIのsortableを使用していて、overflow: scroll/autoなコンテナ内の要素を並び替える場合に、コンテナ内をスクロールしてから要素をドラッグしてスクロールさせようとすると、そのhelper要素の位置がおかしくなってしまう。(jQuery-UI 1.11.4で確認)

この問題に対応するには↓こんな↓感じでヘルパーの位置を強引に戻してあげるとよい。

📄src.js
$(".container").sortable({
    ...
    start: function (event, ui) {
        ui.helper.css('top', ui.originalPosition.top);
    },
    ...
});

いつもsortableとかdraggableってハマるんだよな・・・。

追記(2017/5/9)

上記方法では上手くいかないケースがあった。事象としてはドラッグする要素〜コンテナ要素の中にposition: relative;のものがあると上手くいかない。結局次のようなコードで回避できた。

📄code
var $container = $(コンテナのセレクタ);

$('.container').sortable({
  sort: function(event, ui) {
    var offset = ui.helper.offset();
    ui.helper.offset({ top: offset.top + $container.scrollTop() });
  },
});

sortでやるのがミソ。

あいかわらずsortableはよくハマる・・・

関連する記事


「jquery-ui.sortableでドラッグ中の要素の位置がおかしくなる」に2件のコメントがあります

    1. itmammoth

      バージョンやDOM構造、CSSによって状況は様々なので何とも言えませんね・・・。

コメントする

メールアドレスが公開されることはありません。

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください