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

您可以通过向便利贴 div 添加“noDrop”类，然后使用该类的测试更新 drop 函数来解决此问题。下面使用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>