jQuery scrollable positioning bug + jsfiddle demo

I was trying to use the sortable function of jQuery. But there is a bug. When the containing parent position is set as relative, and I scroll down. It wont work. It will start working again after colliding with another element. Until then it will be placed far away. It will work fine the next time i try to sort any other element.

Here an demostration

Repro: https://jsfiddle.net/agef2ypo/

The code is pretty simple

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

I tried triggering manual update event. It didnt work. What can I do now? Thanks

Solution

Your JSFiddle works if you remove the position: relative; to sortable elements.

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

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

UPDATE

A bit tricky but works. Essentially I simulate a first drag/drop move of 1px.

This require an external library for simulate function under MIT license:

This is the result on JSFiddle

The JS code:

$(".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
    });

  }

});