如何防止放入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>