Javascript高级可拖动故障

我正在制作一个播放列表以供演示。我已设置了一个无序列表，其中嵌套了列表项。“draggable=true”处理程序使这些项可以拖动，这非常有效

这就是我被困的地方

单击项目并准备拖动后。我需要用户有一个强大的视觉反馈，在哪里用户是下降的项目。标准化不提供任何视觉反馈，只是将列表项放在其他项之间。我正在寻找一种方法，可以直观地将其他列表元素推到一边，或者至少在用户持有拖动项的位置上突出显示边框

最好的办法是什么？我在这里放了一些代码以防万一，但我要找的是我写的代码之外的东西

HTML:

---

如何添加代码，使我能够以项目之间突出显示的边框的形式设计视觉反馈。

检查这两个示例

首先，在拖动某个对象时，仅高亮显示悬停项的边框。它使用

dragenter

和

dragleave

事件来添加和删除

over

css类

var源；
var items=document.querySelectorAll（'li'）；
用于（项目中的项目）{
项。添加的列表项（'dragstart'，dragStarted，false）；
item.addEventListener（'drop'，drop，false）；
项目。添加的列表项（'dragover'，Dragingover，false）；
项目。添加的列表项（'dragenter'，dragenter，false）；
项。添加的列表项（'dragleave'，dragleave，false）；
}
document.getElementById（“列表”）.addEventListener（“mouseleave”），drop，false；
功能性疏水剂（e）{
this.classList.add（'over'）；
}
函数dragLeave（e）{
this.classList.remove（'over'）；
}
函数dragStarted（e）{
来源=目标；
e、 setData（“text/plain”，e.target.innerHTML）；
e、 dataTransfer.effectAllowed=“移动”；
这个.classList.add（“over”）；
this.style.opacity='0.4'；
}
功能拖动器（e）{
e、 预防默认值（）；
e、 dataTransfer.dropEffect=“移动”；
}
函数删除（e）{
e、 预防默认值（）；
e、 停止传播（）；
source.style.opacity='1.0'；
如果（e.target.localName=='li'）{
source.innerHTML=e.target.innerHTML；
e、 target.innerHTML=e.dataTransfer.getData（“text/plain”）；
}
此.classList.remove（“结束”）；
source.classList.remove（“结束”）；
}

ul{列表样式类型：无；}
李{
边框：1px实心#000；
边界半径：3px；
文字装饰：无；
填充：2×2×2×10px；
保证金：1px；
宽度：300px；
过渡：0.2s缓进缓出；
}
李，完毕{
边框：1px橙色虚线；
}

太阳照在月亮上
空气辉光
漫反射
星光

最好是提供一个完整的、可验证的示例，而不仅仅是一点代码。我已经修改了代码，以便更有效地反映问题。

<ul>
    <li draggable="true" ondragstart="dragStarted(event)" ondragover="draggingOver(event)" ondrop="dropped(event)" ondragenter="dragEnter(event)"> 
        Item 1
    </li>
    <li draggable="true" ondragstart="dragStarted(event)" ondragover="draggingOver(event)" ondrop="dropped(event)" ondragenter="dragEnter(event)"> 
        Item 2
    </li>
    <li draggable="true" ondragstart="dragStarted(event)" ondragover="draggingOver(event)" ondrop="dropped(event)" ondragenter="dragEnter(event)"> 
        Item 3
    </li>       
</ul>

var source; 

function dragStarted(e){
    source = e.target;
    e.dataTransfer.setData("text/plain", e.target.innerHTML);
    e.dataTransfer.effectAllowed = "move";

}

function draggingOver(e){
    e.preventDefault();
    e.dataTransfer.dropEffect = "move";

}

function dropped(e){
    e.preventDefault();
    e.stopPropagation();
    if (e.target.localName === 'li') {
        source.innerHTML = e.target.innerHTML;
        e.target.innerHTML = e.dataTransfer.getData("text/plain");
    }
}