Javascript JS拖放：使具有特定类名的div不可拖放

我在实现拖放到我的项目时遇到了一些问题。我在做一个像trello一样的看板工具。我有一些是“列表”的div，这些列表中还有其他一些是“卡片”的div。理想情况下，我可以将卡片放入不同的列表中，但不能将列表放入列表中。然而，现在我的代码可以在列表中拖动列表

我想知道如何找到我正在拖动的html类，以便使用它进行验证

所以我想做的是，我可以拖动一个列表，但不能将它放到另一个列表中。不过，我应该能够重新排列列表中的卡片，并将卡片移动到不同的列表中

谢谢

这是Javascript：

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    if ( ev.target.className == "list")  {
        var data = ev.dataTransfer.getData("text");
        ev.target.appendChild(document.getElementById(data));
    }
}

function allowDrop1(ev) {
    ev.preventDefault();
}

function drag1(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop1(ev) {
    ev.preventDefault();
    if ( event.target.className == "listWrap" ) {
        var data = ev.dataTransfer.getData("text");
        ev.target.appendChild(document.getElementById(data));
    }
}
´´´´
And this is a list from the html:
```
<div class="listWrap" ondrop="drop1(event)" ondragover="allowDrop1(event)">
                <div class="list" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag1(event)" id=list_1 >

                    <div class="card" id=card_1 draggable="true" ondragstart="drag(event)">
                        <p> test </p>
                    </div>
                    <div class=card id=card_2 draggable="true" ondragstart="drag(event)">
                        <p> test 2 </p>
                    </div>
                </div>
            </div>

功能allowDrop（ev）{
ev.preventDefault（）；
}
功能阻力（ev）{
ev.dataTransfer.setData（“文本”，ev.target.id）；
}
功能下降（ev）{
ev.preventDefault（）；
如果（ev.target.className==“列表”）{
var data=ev.dataTransfer.getData（“文本”）；
ev.target.appendChild（document.getElementById（数据））；
}
}
功能allowDrop1（ev）{
ev.preventDefault（）；
}
功能drag1（ev）{
ev.dataTransfer.setData（“文本”，ev.target.id）；
}
功能下降1（ev）{
ev.preventDefault（）；
if（event.target.className==“listWrap”）{
var data=ev.dataTransfer.getData（“文本”）；
ev.target.appendChild（document.getElementById（数据））；
}
}
´´´´
这是html中的一个列表：
```
试验

测试2

我修好了！还添加了在另一个列表的列表包装器中拖动列表并使其切换位置的功能

以下是新代码：

var dragget;
var source;
var dragged;

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id)
    dragget = event.target.className;
    dragged = event.target;
    source = ev.target.parentElement;
}

function drop(ev) {
    ev.preventDefault();
    if ( ev.target.className == "list" && dragget == "card" )  {
        var data = ev.dataTransfer.getData("text");
        ev.target.appendChild(document.getElementById(data));
    }
}

function drop1(ev) {
    ev.preventDefault();
    if ( event.target.className == "listWrap" && dragget == "list" ) {

        var data = ev.dataTransfer.getData("text");
        source.innerHTML = ev.target.innerHTML;
        ev.target.innerHTML = "";
        ev.target.appendChild(dragged);
    }
}

HTML:

试验

测试2

<div class="listWrap" ondrop="drop1(event)" ondragover="allowDrop(event)">
                <div class="list" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event)" id=list_1 >

                    <div class="card" id=card_1 draggable="true" ondragstart="drag(event)">
                        <p> test </p>
                    </div>
                    <div class=card id=card_2 draggable="true" ondragstart="drag(event)">
                        <p> test 2 </p>
                    </div>
                </div>
            </div>