Javascript 无DOM突变的Dragndrop

我试图在一个用litElement编写的应用程序中实现dragndrop，但不确定是否与vanilla js有任何区别 但据我所知，这必须在DOM中不发生变异的情况下进行，也就是说，当数据发生变化时，它们在存储中也会发生变化， 我有下面的代码，但是你能告诉我当你制作一个dragdrop时如何正确地实现元素替换吗？我需要在拖动时交换元素

     <div class="tasks__list">
                ${this.stages.map((el, index) => {
            return html`
              <div class="tasks__item" 
               draggable="true"
               @dragstart="${e => this.dndEvent("start", el.id, e)}"
               @dragend="${e => this.dndEvent("end", el.id, e)}"
               @dragover="${e => this.dndEvent("over", el.id, e)}"
               @dragenter="${e => this.dndEvent("enter", el.id, e)}">
                item${i}</div>


 dndEvent(action, itemId, e) {

        switch (action) {
            case "start":
                console.log('start')
                this.draggedId = itemId;
                e.target.classList.add(`selected`);
                break
            case "enter":
                console.log('enter')
                if (!this.draggedId == null) return;
                store.dispatch(moveDragabbleItem({  //here I delete item from storage when starting dragg
                    itemId: itemId,                 //but then also deleted all items that i hover after
                }))
                e.preventDefault();
                break;
            case 'end':
                console.log('end')
                if (this.draggedId == null) return;
                e.target.classList.remove("selected");
                this.draggedId = null;
                break;
            case "over":
                console.log('over')
                e.preventDefault();          
        }
    }

${this.stages.map（（el，index）=>{
返回html`
项目${i}
dndEvent（操作，项目ID，e）{
开关（动作）{
案例“开始”：
console.log（'start'）
this.draggedId=itemId；
e、 target.classList.add（`selected`）；
打破
案例“输入”：
console.log（'enter'）
如果（！this.draggedId==null）返回；
dispatch（moveDragableItem（{//这里我在启动dragg时从存储器中删除了项
itemId:itemId，//然后还删除了我在其之后悬停的所有项目
}))
e、 预防默认值（）；
打破
案例“结束”：
console.log（'end'）
if（this.draggedId==null）返回；
e、 target.classList.remove（“选定”）；
this.draggedId=null；
打破
案例“结束”：
console.log（'over'）
e、 预防默认值（）；
}
}