如何防止掉入div元素？

Question

我正在使用HTML和JavaScript制作拖放系统。我会从列＃34; To Do＆＃34;中拖出并拖拽任务（div元素）。到＆＃34;在发展中＆＃34;反之亦然。我唯一能解决的问题是你可以将任务拖放到另一个任务中而且我不会。

这是开始的情况：

这是在拖放之后：

现在我预防用户可以将任务2拖放到任务1中。我怎么能这样做？您可以在下面找到我的代码。

提前致谢。

＆＃13;

＆＃13;

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));
}

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以通过向post-it 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>