Tôi đang tạo hệ thống kéo và thả bằng HTML và JavaScript. Tôi sẽ kéo và drap một nhiệm vụ (div
yếu tố) từ cột "To Do" đến "In Development" và ngược lại. Vấn đề duy nhất tôi có là bạn có thể kéo và thả một nhiệm vụ vào một nhiệm vụ khác và tôi sẽ không làm.Làm thế nào để ngăn chặn thả vào một phần tử div?
Đây là bắt đầu tình hình:
và đây là sau một kéo và thả:
Bây giờ tôi sẽ ngăn chặn điều đó người dùng có thể kéo và thả các nhiệm vụ 2 vào nhiệm vụ 1. Làm thế nào tôi có thể làm điều đó? Dưới đây bạn có thể tìm thấy mã của tôi.
Xin cảm ơn trước.
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>