Перетаскиваемые объекты Interact.js не отображаются при перетаскивании из рабочей зоны с переполнением: scroll

Question

Я создаю приложение interactive.js с двумя дропзонами. Начинается со всех перетаскиваемых объектов и прокручивается. При перетаскивании из исходной зоны сброса перетаскиваемые объекты становятся скрытыми.

Я попробовал все предложенные методы, такие как установка overflow: visible и position: absolute для перетаскиваемых объектов. Я также попробовал почти все возможные комбинации z-индексов, которые могли бы иметь смысл.

Вот JSfiddle с воссозданной проблемой: http://jsfiddle.net/L5g9prao/1/

• Ожидаемое поведение: перетаскиваемые объекты остаются видимыми при перетаскивании между дропзонами

• Фактическое поведение: перетаскиваемые объекты становятся скрытыми, поскольку они покидают исходную зону.

Любая помощь будет принята с благодарностью. Спасибо!

Answer 1

Решение, которое я нашел, состояло в том, чтобы применить position: fixed и позицию top к перетаскиваемому событию onstart, например:

onstart(event) {
    let target = event.target;
    let position = target.getBoundingClientRect();
    target.style.position = "fixed";
    target.style.top = position.top + "px";
}

И затем в моем случае использования перетаскиваемый объект удаляется и клонируется, поэтому мне не нужно удалять эти свойства, но если вам нужно, сделайте это в функции onend следующим образом:

onend(event) {
    let target = event.target;
    target.style.position = "relative";
    target.style.top = "auto";
}

Спасибо @marcdubs за ответ