在拖放列表中添加和删除项目

Question

我必须重新编写一个程序（javascript 和 html）。所以我想到用 Tauri 和 Sevlte 给它一个外观更新的独立版本。迈出第一步绝非易事，尤其是如果您更像是 C 程序员而不是 C++ 或其他任何语言:-(

这是我的问题：

我创建了一个带有可拖动元素的拖放区域： 使用“svelte-dnd-action”。

在我的主文件“+page.svelte”中，我创建一个包含条目的数组：

import SortableList from ./SortableList.svelte
 
let sensors = [ 
    {id: 0, title: 'USB1'},
    {id: 1, title: 'USB2'},
    {id: 2, title: 'USB3'},
    {id: 3, title: 'File: abc.txt'},
    {id: 4, title: 'File: 123.txt'},        
];

然后我打电话

<SortableList list = {sensors}/>

在“SortableList.svelte”内部，我循环遍历所有列表元素并调用“ListElement.svelte”来显示该元素。 （我知道，我可以直接在这里执行此操作...）

<section use:dndzone={{items: list, dropFromOthersDisabled}}
    on:consider={handleSort}
    on:finalize={handleSort}>    
    {#each list as item (item.id) }
        <div animate:flip={{ duration: flipDurationMs }}>
        <ListElement count = {item.id} id = {item.title}/>
    </div>
    {/each}
</section>

“ListElement.svelte”然后创建要显示的列表项：

<div class="ListElement">
    <div style="display: inline-block;">
        <h1 class ={id}>{id}</h1>
    </div>
    <div style="display: inline-block;">
        <div >
            <p class ="{id}, IDtag" style="margin: 0px">{@html ListBoxString}:{count}</p>
        </div>
        <div >
            <button class={id} on:click={ListBoxClick}>{id}: Clicked {count} {count === 1 ? 'time' : 'times'}</button>
        </div>
    </div>
</div>

所有这些都工作正常......直到我开始使用该列表。我有一个按钮，可以向数组“传感器”添加一个新元素，这在“+page.svelte”中：

function buttonClick(){
    let i=sensors.length;
        sensors = [...sensors,{id:i, title:'great'}];
}

它有效:-)，但是如果我通过拖放手动对列表进行排序，添加元素会恢复原始顺序！ :-(

我还想为每个列表元素添加一个“删除”按钮。但我的猜测：这会导致类似的问题。在浏览了这个“度假问题”几个小时后，我决定询问社区。

我尝试过的：

• 重新编号“SortableList.svelte”中的 id 值，我使用函数“on:finalize...”...丑陋的动画，添加另一个元素会重新排列列表。
• 使用“on:drop”我收到“A11y:
  with drop handler must have an ARIA role”错误。

嗯，我确信有一种简单而优雅的方法可以解决这个问题。

非常感谢大家阅读我的问题并可能回答它。

Answer 1

您只是缺少一个绑定，

SortableList

内部的更改（重新排序）不会传播回来。

<SortableList bind:list={sensors} />

REPL