'interactjs drag stops after few events

I just had a heavy problems with a vue cli project with interactjs

the latest version is installed "interactjs": "^ 1.10.3",

I use in vue https://github.com/kimuraz/vue-interact

Now I have the following problem, in a dummy project I have a component from which several multitouch elements can be created, these can be scaled, rotated, sorted ... all of them work wonderfully with dummy content.

in a real project I have a div that acts as a container for a scrollable content, suddenly the drag in this area no longer worked. At first I thought it was because of the container/scollable div combination, but when I remove the container the problem remained.

The problem currently occurs when the element loaded into the slot is a text element with a few lines of text. with 2-3 lines it can be moved on the text, if there are more lines the drag start and move event will be triggered, the move only a few times. so the window can be moved a bit.

what can it be, how can i handle it?

here the simple structure of the component:

<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>

edit: after further testing I come to the following conclusion:

it is due to the overflow-y: auto of the scroll container.

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

if I set this property to hidden I can touch it anywhere as usual.

what options do i have? Pack the class '.window-content-scroll' in ignoreFrom within interact.js. Unfortunately, the entire content area is then no longer draggable, I thought I could move the window horizontally ...

scrolling the window content via javascript, does that make sense, is there a good example?

maybe someone has a nice idea?

vuejs2interact.jsinteractjs


Solution 1:[1]

Closing the loop for others who might find this: touch-action: none; worked for me, as suggested in @Shmack's comment. Was working with mouse, not touch.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Jeremy Caney

Related Questions