javascript - JS 拖放 : Make a div with specific classname not droppable

Question

我在对我的元素实现拖放操作时遇到了一些问题。我正在制作一个像 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>

Answer 1

我修好了!还添加了将列表拖动到另一个列表的列表包装器内并使它们切换位置的功能。

这是新代码:

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:

<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>