CdkDrag moves way too fast

Question

I'm facing some strange CdkDrag behavior, when draggable element is wider than container, even dragging for like few pixels, instantly drags to end of draggable element.

Any idea how to make it drag smoothly, as it works with red square?

Answer 1

I imagine you has two functions that move the element (click) and (drag). You can has a variable "onDrag", so you can has some like

<div class="example-box" cdkDrag
  (cdkDragStarted)="onDrag=true"
  (cdkDragEnded)="dragEnded()"
  (click)="!onDrag && click()"
  >
  Drag me around
</div>

Im drag start we put the variable to true, in dragEnded we enclosed in a setTimeOut put the variable to false. the click check first the variable

  onDrag:boolean=false

  click()
  {
    console.log("click")
  }
  dragEnded()
  {
    setTimeout(()=>{
       this.onDrag=false
    })
  }