几次事件后 interactjs 拖动停止

Question

我刚刚在使用 interactjs 的 vue cli 项目中遇到了严重问题

已安装最新版本 “interactjs”：“^ 1.10.3”，

我在vue中使用https://github.com/kimuraz/vue-interact

现在我遇到了以下问题，在一个虚拟项目中，我有一个组件，可以从中创建多个多点触控元素，这些元素可以缩放、旋转、排序……所有这些都可以很好地处理虚拟内容。

在一个真实的项目中，我有一个 div 作为可滚动内容的容器，突然间，这个区域的拖动不再起作用了。起初我以为是因为 container/scollable div 组合，但是当我移除容器时问题仍然存在。

当加载到插槽中的元素是带有几行文本的文本元素时，当前会出现此问题。 2-3行就可以在文本上移动，如果有更多的行，拖动开始和移动事件将被触发，移动只有几次。所以 window 可以移动一点。

这可能是什么，我该如何处理？

这里是组件的简单结构：

<div :style="scaleRotateStyle" ref="scaleit" class="scale-element" v-show="isWindowActive == true" @mousedown="touchDown">
        
        <div class="window-content-back" ref="content"> 
            <div class="window-content-scroll">
                <div class="window-content">
                    <slot :idNr="idNr" ></slot>
                </div>
            </div>
        </div>
        
</div>

编辑：经过进一步测试，我得出以下结论：

是滚动容器的overflow-y:auto引起的

.window-content-scroll {
     ...
     overflow-y: auto;
     overflow-x: hidden;
   ...
}

如果我将此属性设置为隐藏，我可以像往常一样在任何地方触摸它。

我有什么选择？在 interact.js 内的 ignoreFrom 中打包 class '.window-content-scroll'。不幸的是，整个内容区域不再可拖动，我想我可以水平移动 window ...

通过 javascript 滚动 window 内容，这是否有意义，有一个很好的例子吗？

也许有人有好主意？

Answer 1

为可能发现此问题的其他人关闭循环：touch-action: none; 对我有用，如中所建议。正在使用鼠标，而不是触摸。

几次事件后 interactjs 拖动停止

interactjs drag stops after few events

interact.js

vuejs2

interactjs