如何防止放入div元素？

Question

我使用HTML和JavaScript进行拖放系统。我会将任务（div元素）从“待办事项”栏拖动到“开发中”，反之亦然。我得到的唯一问题是你可以将任务拖放到另一个任务中，而我不会。

这是开始的情况：

，这是一个拖放后：

现在我会阻止用户可以拖放任务2进入任务1.我该怎么做？在下面你可以找到我的代码。

在此先感谢。

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

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

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

table { 
 
    font-family: "Segoe UI", sans-serif; 
 
    border-collapse: collapse; 
 
} 
 
table, 
 
th, 
 
td { 
 
    border: 1px solid gray; 
 
    padding: 10px; 
 
} 
 
th { 
 
    background-color: lightgray; 
 
} 
 
th, 
 
td { 
 
    width: 33.33%; 
 
} 
 
td { 
 
    min-height: 80px; 
 
} 
 
.post-it { 
 
    background-color: yellow; 
 
    padding: 10px 5px; 
 
    margin: 5px; 
 
    margin-bottom: 20px; 
 
    box-shadow: 5px 5px 5px gray; 
 
    border: 1px black solid; 
 
} 
 
.post-it h4 { 
 
    text-align: center; 
 
    margin: 0; 
 
}

<table> 
 
    <tr> 
 
    <th>To Do</th> 
 
    <th>In Development</th> 
 
    <th>Done</th> 
 
    </tr> 
 

 
    <tr> 
 

 
    <td id="todo" ondrop="drop(event)" ondragover="allowDrop(event)"> 
 

 
     <div id="task1" class="post-it" draggable="true" ondragstart="drag(event)"> 
 
     <h4 draggable="false">Task 1</h4> 
 
     <p draggable="false">Lorem ipsum dolor sit amet</p> 
 
     </div> 
 

 
     <div id="task2" class="post-it" draggable="true" ondragstart="drag(event)"> 
 
     <h4 draggable="false">Task 2</h4> 
 
     <p draggable="false">Irish skinny, grinder affogato</p> 
 
     </div> 
 

 
    </td> 
 

 
    <td id="indev" ondrop="drop(event)" ondragover="allowDrop(event)"></td> 
 
    <td id="done" ondrop="drop(event)" ondragover="allowDrop(event)"></td> 
 
    </tr> 
 
</table>

Answer 1

您可以通过添加一个“noDrop”类到您的文章，它DIV，然后用该类的测试更新您的下落功能解决了这个问题。以下使用jQuery做测试，使用jQuery hasClass函数。

function drop(ev) { 
 
    var _target = $("#" + ev.target.id); 
 
    var data = ev.dataTransfer.getData("text"); 
 
    if ($(_target).hasClass("noDrop")) { 
 
    console.log("no transfer"); 
 
    ev.preventDefault(); 
 
    } else { 
 
    ev.preventDefault(); 
 
    ev.target.appendChild(document.getElementById(data)); 
 
    } 
 
}

table { 
 
    font-family: "Segoe UI", sans-serif; 
 
    border-collapse: collapse; 
 
} 
 
table, 
 
th, 
 
td { 
 
    border: 1px solid gray; 
 
    padding: 10px; 
 
} 
 
th { 
 
    background-color: lightgray; 
 
} 
 
th, 
 
td { 
 
    width: 33.33%; 
 
} 
 
td { 
 
    min-height: 80px; 
 
} 
 
.post-it { 
 
    background-color: yellow; 
 
    padding: 10px 5px; 
 
    margin: 5px; 
 
    margin-bottom: 20px; 
 
    box-shadow: 5px 5px 5px gray; 
 
    border: 1px black solid; 
 
} 
 
.post-it h4 { 
 
    text-align: center; 
 
    margin: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <th>To Do</th> 
 
    <th>In Development</th> 
 
    <th>Done</th> 
 
    </tr> 
 

 
    <tr> 
 

 
    <td id="todo" ondrop="drop(event)" ondragover="allowDrop(event)"> 
 

 
     <div id="task1" class="post-it noDrop" draggable="true" ondragstart="drag(event)"> 
 
     <h4 draggable="false">Task 1</h4> 
 
     <p>Lorem ipsum dolor sit amet</p> 
 
     </div> 
 

 
     <div id="task2" class="post-it noDrop" draggable="true" droppab ondragstart="drag(event)"> 
 
     <h4 draggable="false">Task 2</h4> 
 
     <p>Irish skinny, grinder affogato</p> 
 
     </div> 
 

 
    </td> 
 

 
    <td id="indev" ondrop="drop(event)" ondragover="allowDrop(event)"></td> 
 
    <td id="done" ondrop="drop(event)" ondragover="allowDrop(event)"></td> 
 
    </tr> 
 
</table>