Taiga UI 5.0 is out!

Pan CDK

GitHub

tuiPan The directive emits delta between mousemove / touchmove events. You can use it to change the coordinates of an element as in example below

Basic 

    
      
    

      
      
    

  
    
      <div class="container tui-text_body-l">
    <div
        class="circle"
        [style.transform]="transform$ | async"
        (tuiPan)="onPan($event)"
    ></div>
</div>

    

      
      
    

  
    
      .container {
    display: flex;
    justify-content: center;
    align-items: center;
    inline-size: 12rem;
    block-size: 12rem;
    background-color: var(--tui-background-neutral-1);
    overflow: hidden;
}

.circle {
    inline-size: 6rem;
    block-size: 6rem;
    border-radius: 100%;
    touch-action: none;
    background-color: var(--tui-chart-categorical-01);
    box-shadow: 0.25rem 0.25rem 0.5rem 0 rgba(34, 60, 80, 0.2);
    cursor: move;
    will-change: transform;
}
GitHub StackBlitz