jQuery 可滚动定位错误 + jsfiddle 演示

Question

我正在尝试使用 jQuery 的排序功能。但是有一个错误。当包含的父位置设置为 relative 时，我向下滚动。它不会工作。它会在与另一个元素碰撞后重新开始工作。在那之前，它将被放置在很远的地方。下次我尝试对任何其他元素进行排序时，它将正常工作。

Here an demostration

复制：https://jsfiddle.net/agef2ypo/

代码非常简单

$(".sortable").sortable({
  items: '.sortme',
  containment: "parent",
  tolerance: "pointer"
});

我尝试触发手动更新事件。它没有用。我现在能做什么？谢谢

Answer 1

你的 JSFiddle works 如果你删除 position: relative; 到可排序的元素。

$(".sortable").sortable({
  items: '.sortme',
  containment: "parent",
  tolerance: "pointer"
});

/* 
// === Wrong in JSFiddle
$(".sortable").sortable({
  items: '.sortme',
  containment: "parent",
  tolerance: "pointer"
}).css('position', 'relative');
*/

更新

有点棘手但有效。本质上我模拟了第一个 drag/drop 移动 1px.

根据 MIT 许可，simulate 函数需要外部库：

This is the result on JSFiddle

JS代码：

$(".sortable").sortable({
  items: '.sortme',
  containment: "parent",
  handle: '.move',
  tolerance: "pointer",
  helper: 'clone',
  create: function(event, ui) {

    let el = $(this).find('.sortme:first .move');
    el.simulate("drag", {
        dx: 1,
        dy: 1
    });

  }

});

jQuery 可滚动定位错误 + jsfiddle 演示

jQuery scrollable positioning bug + jsfiddle demo

jquery

jquery-ui

jquery-ui-sortable