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>

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

1 个答案: