svelte用のドラッグアンドドロップコンポーネントを作成していて、アニメーションを追加したいと思います。別のコンポーネントのコードを適応させましたが、機能させることができません。問題がどこにあるかを特定するのを手伝ってもらえますか？エラーが発生するのがわかりません。ここで作業中のREPL
https://svelte.dev/repl/acc2c90db2054d89b210f23c026c525e?version=3.16.7
貼り付けるとエラーが表示されます：
in:receive={{ key: index }}
out:send={{ key: index }}
animate:flip={{ duration: 300 }}
REPLのコンポーネントの130行目に
次のエラーメッセージが表示されます：「animateディレクティブを使用する要素は、キー付きの各ブロックの直接の子である必要があります（132：8）」
「wrap」divを削除して、アニメーションを#eachの「直接の子」として移動しようとしましたが、役に立ちませんでした。
{#if list && list.length}
<div class="cont">
{#each list as item, index}
<div class="wrap">
<div
data-index={index}
id={index}
on:dragstart={() => { return false }}
on:touchstart={handleMousedown}
on:touchmove={handleMousemove}
on:touchend={handleMouseup}
on:mousedown={handleMousedown}
on:mousemove={handleMousemove}
on:mouseover={HandleMouseover}
in:receive={{ key: index }}
out:send={{ key: index }}
animate:flip={{ duration: 300 }}
class="tobedragged {((index == movingIndex) && moving) ? 'ghost' : ''}" style="top: {m.y}px; left: {m.x}px;">
list index: {index}<br>
{item}
<slot {item} {index} />
</div>
</div>
{/each}
</div>
{/if}
あなたが持っているのは、各ブロックにインデックスが付けられていることですが、これは機能しません。キー付きの各ブロックは次のようになります。（できれば適切なキーを使用して）
{#each list as item, index (item)}
また、達成しようとしていることに対して「受信」と「送信」が必要かどうかもわかりません。animateディレクティブで十分です。
こちらをご覧くださいhttps://svelte.dev/repl/2a310d0e23954ee591f941ff57616364?version=3.16.7
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加