Пример CSS-столкновения: svelte + перетаскивание попутного ветра ⇐ CSS

[Anonymous]

Я пытаюсь следовать примеру https://svelte.dev/repl/e62f83d69cea4fd ... ion=4.2.18

Код: Выделить всё

// https://svelte.dev/repl/915db3b3ed704fddb7ddfb64bcbc2624?version=3.31.1

let list = [
{ id: 1, value: "red" },
{ id: 2, value: "green" },
{ id: 3, value: "blue" },
{ id: 4, value: "cyan" },
];

let mouseYCoordinate = null; // pointer y coordinate within client
let distanceTopGrabbedVsPointer = null;

let draggingItem = null;
let draggingItemId = null;
let draggingItemIndex = null;

let hoveredItemIndex = null;

$: {
// prevents the ghost flickering at the top
if (mouseYCoordinate == null || mouseYCoordinate == 0) {
// showGhost = false;
}
}

$: {
if (
draggingItemIndex != null &&
hoveredItemIndex != null &&
draggingItemIndex != hoveredItemIndex
) {
// swap items
[list[draggingItemIndex], list[hoveredItemIndex]] = [
list[hoveredItemIndex],
list[draggingItemIndex],
];

// balance
draggingItemIndex = hoveredItemIndex;
}
}

let container = null;


{#if mouseYCoordinate}

{draggingItem.value}

{/if}

{#each list as item, index (item)}
class="item {draggingItemId == item.id ? 'invisible' : ''}"
style="background: {item.value};"
draggable="true"
on:dragstart={(e) => {
mouseYCoordinate = e.clientY;
//console.log('dragstart', mouseYCoordinate);

draggingItem = item;
draggingItemIndex = index;
draggingItemId = item.id;

distanceTopGrabbedVsPointer = e.target.getBoundingClientRect().y - e.clientY;
}}
on:drag={(e) => {
mouseYCoordinate = e.clientY;
//console.log('drag', mouseYCoordinate);
}}
on:dragover={(e) => {
hoveredItemIndex = index;
}}
on:dragend={(e) => {
//console.log('dragend', mouseYCoordinate);
//console.log('\n');

// mouseYCoordinate = e.clientY;

draggingItemId = null; // makes item visible
hoveredItemIndex = null; // prevents instant swap
}}>
{item.value}

{/each}




{JSON.stringify(list)}


.container {
background: yellow;
padding: 10px;
}

.item {
width: 300px;
background: white;
padding: 10px;
margin-bottom: 10px;
cursor: grab;
}

.ghost {
margin-bottom: 10px;
pointer-events: none;
z-index: 99;
position: absolute;
top: 0;
left: 10;
}

.invisible {
opacity: 0;
}

И в мой проект включен попутный ветер, вот так

Код: Выделить всё

@tailwind base;
@tailwind components;
@tailwind utilities;

Но пример работает только в том случае, если я отключу включение попутного ветра, я не могу выяснить, какие значения попутного ветра по умолчанию приводят к тому, что пример не работает.
Я безуспешно пытался проверить различия классов dom с помощью инструментов разработчика
также пытался использовать !important для некоторых параметров CSS

Подробнее здесь: https://stackoverflow.com/questions/787 ... -collision