JQuery UI Sortable - Grab shift when zooming

I was trying to use JQuery UI Sortable plugin for multiple tables. The idea was to grab and drop elements in cells of a table, by connecting all <td> tags with this plugin.

It looks like this: https://jsfiddle.net/Lhm3z0bw/3/

By changing zoom with mouse wheel controls, we can actually grab the elements already placed in the table. However, when the scale is changing, moving them makes a shift on the current grabbed element.

I tried adding some functions from the JQuery UI API for resetting positions for the element or updating the helper, but there's no good results on it.

$(".sortableCards").sortable({
  connectWith: ".sortableCards",
  containment: "window",
  scroll: false,
  placeholder: "sortable-placeholder",
  items: ".card1",
  forcePlaceholderSize: false,
  sort: function(evt,ui) {
    //////////        
    // Maybe some fix needed here ?
    //////////
  }
  receive: function(event, ui) {
    if ($(ui.sender).hasClass('cards')) {
      if ($(this).find('.card1').length > 2) {
        $(ui.sender).sortable('cancel');
      } else {
        ui.item.clone().appendTo($(ui.sender));
      }
    }
  }
});

Here is another linked question with the same issue : How to get JqueryUI Sortable working with Zoom/Scale - mouse movements