Sortierbare Liste

$handle-height: 18px;
$handle-width: 10px;

@keyframes sortable-list-handle-wiggle {
  0%, 7% {transform: rotateZ(0);}
  15% {transform: rotateZ(-13deg);}
  20% {transform: rotateZ(9deg);}
  25% {transform: rotateZ(-10deg);}
  30% {transform: rotateZ(7deg);}
  35% {transform: rotateZ(-2deg);}
  40%, 100% {transform: rotateZ(0);}
}

.sortable-list {
    display: flex;
    gap: var(--bs-gutter-y);
    flex-direction: column;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.sortable-list__item {
    margin: 0;
    min-height: calc(#{$handle-height} + #{$spacer * 2});
    padding: 0 0 0 calc(#{$handle-width} + #{$handle-width});
    position: relative;
}

.sortable-list__handle {
    cursor: grab;
    height: $handle-height;
    background-image: escape-svg(url("data:image/svg+xml,<svg width='100%25' height='100%25' viewBox='0 0 10 18' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'><path d='M0,2c0,-1.097 0.903,-2 2,-2c1.097,0 2,0.903 2,2c0,1.097 -0.903,2 -2,2c-1.097,0 -2,-0.903 -2,-2Z' style='fill:#{$primary};'/><path d='M0,9c0,-1.097 0.903,-2 2,-2c1.097,0 2,0.903 2,2c0,1.097 -0.903,2 -2,2c-1.097,0 -2,-0.903 -2,-2Z' style='fill:#{$primary};'/><path d='M0,16c0,-1.097 0.903,-2 2,-2c1.097,0 2,0.903 2,2c0,1.097 -0.903,2 -2,2c-1.097,0 -2,-0.903 -2,-2Z' style='fill:#{$primary};'/><path d='M6,2c0,-1.097 0.903,-2 2,-2c1.097,0 2,0.903 2,2c0,1.097 -0.903,2 -2,2c-1.097,0 -2,-0.903 -2,-2Z' style='fill:#{$primary};'/><path d='M6,9c0,-1.097 0.903,-2 2,-2c1.097,0 2,0.903 2,2c0,1.097 -0.903,2 -2,2c-1.097,0 -2,-0.903 -2,-2Z' style='fill:#{$primary};'/><path d='M6,16c0,-1.097 0.903,-2 2,-2c1.097,0 2,0.903 2,2c0,1.097 -0.903,2 -2,2c-1.097,0 -2,-0.903 -2,-2Z' style='fill:#{$primary};'/></svg>"));
    left: 0;
    opacity: 0.75;
    position: absolute;
    top: $spacer;
    transition: opacity .15s ease-in-out;
    width: $handle-width;
}

.sortable-list__item:hover .sortable-list__handle {
    animation-name: sortable-list-handle-wiggle;
    animation-duration: 1000ms;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
    opacity: 1;
}

Varianten

<ol class="sortable-list gy-2">
    <li class="sortable-list__item">
        <span class="sortable-list__handle"></span>
        <div class="p-3 bg-light-gray">
        	<strong>#1</strong> Dieses Element kann<br>verschoben werden.
    	</div>
    </li>
    <li class="sortable-list__item">
        <span class="sortable-list__handle"></span>
        <div class="p-3 bg-light-gray">
        	<strong>#2</strong> Dieses Element kann<br>verschoben werden.
    	</div>
    </li>
    <li class="sortable-list__item">
        <span class="sortable-list__handle"></span>
        <div class="p-3 bg-light-gray">
        	<strong>#3</strong> Dieses Element kann<br>verschoben werden.
    	</div>
    </li>
    <li class="sortable-list__item">
        <span class="sortable-list__handle"></span>
        <div class="p-3 bg-light-gray">
        	<strong>#4</strong> Dieses Element kann<br>verschoben werden.
    	</div>
    </li>
    <li class="sortable-list__item">
        <span class="sortable-list__handle"></span>
        <div class="p-3 bg-light-gray">
        	<strong>#5</strong> Dieses Element kann<br>verschoben werden.
    	</div>
    </li>
</ol>