When use snappable property dragging moveable element appear virtual line shadow, then disappear

[chenp1204]

Environments

• Framework name: Vue
• Framework version: 2.6.13
• Moveable Component version: 0.27.2 moveable
• Testable Address(optional):

Description

Hi @daybrush ,

When use snappable property, dragging moveable element appear virtual line shadow, after a few seconds disappear,
but i don't know why, please give me a help......

The following is my moveable config:

this.moveable = new Moveable(this.canvasViewer.getViewport(), {
      draggable: true,
      resizable: false,
      keepRatio: false,
      origin: false,
      throttleDrag: 0,
      throttleResize: 0,
      snappable: true,
      horizontalGuidelines: this.horizontalGuides?.getGuides(),
      verticalGuidelines: this.verticalGuides?.getGuides(),
      snapThreshold: 5,
      isDisplaySnapDigit: true,
      snapGap: true,
      snapDirections: { left: true, top: true, right: true, bottom: true, center: true, middle: true },
      elementSnapDirections: { left: true, top: true, right: true, bottom: true, center: true, middle: true },
      elementGuidelines: [],
      snapDigit: 0,
    }).on('clickGroup', (e: OnClickGroup) => this.onClickGroup(e))
      .on('dragStart', (e: OnDragStart) => this.onDragStart(e))
      .on('drag', (e: OnDrag) => this.onDrag(e))
      .on('dragEnd', (e: OnDragEnd) => this.onDragEnd(e))

The phenomenon of my situation...

[jkdream2025]

Hi, I got the same issues. And I found a clue, this issue will be appeared when the moveable.zoom is not 1.

[jkdream2025]

I avoided this issues by another implementation. pls go through the following steps, hope it helpful for you.

1. to initialize the Moveable with zoom parameter is 1.
2. to initialize the horizontal/vertical Guides with proper zoom scaler (in my case, it's dynamically).
3. in the drag event of moveable, I setup position of dragging element by transform:translate(X,Y) or left/top, and the key point is that I Math.floor or Math.round the position parameters before applying it to dragging elements's CSS style.

The above steps works well in my case.

[chenp1204]

@John-K-2012 Thank you very much, i'll have a try ~

[chenp1204]

Hi @John-K-2012
I have try your steps,

1. set moveable zoom to 1
   
2. scaler in my case zoom is also dynamically.
3. use Math.round to get integer set css style
   

but in my case it's not work~
thank you

[daybrush]

@chenp1204
This is most likely a browser rendering bug. I don't know if there is a solution.

[helson-lin]

@chenp1204 how did you resolve it? i have got the same problem

[chenp1204]

@chenp1204 how did you resolve it? i have got the same problem

No, i can not resolve it yet

[daybrush]

@John-K-2012 @chenp1204 @helson-lin

Try adding outline: 1px solid transparent; css to your targets.

#805 (comment)