Question

我正在构建带有两个dropzone的interact.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提供answer

带溢出从拖放区拖出时，Interact.js可拖动对象不可见：scroll

1 个答案: