Draggable Items

Code

<script setup lang="ts">
  import {  } from 'vue';

  const  = ([
    { : '1', : '1', : 'range', : { '--item-background': 'var(--color-2)' }, : 1000000, : 4500000 },
    { : '2', : '2', : 'range', : { '--item-background': 'var(--color-4)' }, : 4500000, : 6000000 },
    { : '3', : '3', : 'range', : 6000000, : 8000000 },
  ]);

  let  = 0;
  let : 'resize-start' | 'resize-both' | 'resize-end' | undefined;
  let  = null;

  function  ({ , ,  }) {
    if (.type === 'pointerdown') {
      if (!.target.dataset.action) {
        return;
      }

       = .target.dataset.action as typeof ;
       = .id;
       = ;
    }
    else if (.type === 'pointermove') {
      if (!) {
        return;
      }

      const  = ..( => . === )!;
      const  =  - ;

      if ( === 'resize-start' ||  === 'resize-both') {
        . += ;
      }
      if ( === 'resize-end' ||  === 'resize-both') {
        . += ;
      }

       = ;
    }
  }

  .('pointerup', () => {
     = ;
  }, { : true });

</script>

<template>
  <
    =""
    ="[{: '1'}, {: '2'}, {: '3'}]"
    ="0"
    ="8000000"
    @=""
    @=""
  >
    < #item>
      < ="draggable" data-action="resize-both">
        < ="draggable-handle" data-action="resize-start"></>
        < ="draggable-handle" data-action="resize-end"></>
      </>
    </>
  </Timeline>
</template>

<style lang="scss" scoped>
  .draggable {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: space-between;
    cursor: move;

    .draggable-handle {
      position: relative;
      width: 1.2rem;
      height: 100%;
      cursor: ew-resize;
      opacity: .6;

      &::before {
        content: '';
        border-inline: 1px solid white;
        width: 4px;
        height: 40%;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        position: absolute;
      }

      &:hover {
        opacity: 1;
      }
    }
  }
</style>