ul-li对2个空投目标

Question

我正在努力组织这个项目。在我的清单中，我有水果&蔬菜。我希望能够将正确的项目拖到正确的框中。一旦它被放在正确的盒子里（掉落），它就应该是不可见的。希望有人能帮忙。

HTML

<header>
    <h1>THIS IS A TEST PAGE</h1>
  </header>
  <nav>

  </nav>
  <section>
    <h1>Choose a Box</h1>
    <ul id="fruit">Fruit
    </ul>
    <ul id="veg">Veg
    </ul>

  </section>
  <article>
    <ul id="dragsource">
      <li id="item1" draggable="true">Apple</li>
      <li id="item2" draggable="true">Banana</li>
      <li id="item3" draggable="true">Orange</li>
      <li id="item4" draggable="true">Potato</li>
      <li id="item5" draggable="true">Carrot</li>
      <li id="item6" draggable="true">Pea</li>
    </ul>
  </article>

JS

window.onload = function() {
      var target1 = document.getElementById("fruit");
      var target2 = document.getElementById("veg");
      var list = document.querySelectorAll("#dragsource li");
      for (i = 0; i < list.length; i++) {
        list[i].draggable = true;
        list[i].ondragstart = function(event) {
          var event = event || window.event;
          var dt = event.dataTransfer;
          dt.setData("text", event.target.id);
          dt.effectAllowed = "move";
        };
      }

      target1.ondragover = function(event) {
        var event = event || window.event;
        event.preventDefault();
      };
      target2.ondragover = function(event) {
        var event = event || window.event;
        event.preventDefault();
      };

      target2.ondrop = function(event) {
        var event = event || window.event;
        var dt = event.dataTransfer;
        event.preventDefault();
        var data = dt.getData("text");
        target2.appendChild(document.getElementById("data"));
      };
      target1.ondrop = function(event) {
        var event = event || window.event;
        var dt = event.dataTransfer;
        event.preventDefault();
        var data = dt.getData("text");
        target1.appendChild(document.getElementById(data));
      };
    };

CSS

header {
  background-color: black;
  color: yellow;
  text-align: center;
  padding: 5px;
}
nav {
  line-height: 30px;
  background-color: yellow;
  height: 400px;
  width: 100px;
  float: left;
  padding: 5px;
}
body,
html {
  background-color: silver;
  font-family: sans-serif;
  color: black;
  text-align: center;
}
section {
  width: 482px;
  height: 220px;
  float: left;
  text-align: center;
  padding: 5px;
}
#fruit {
  width: 90px;
  height: 120px;
  left: 150px;
  top: 150px;
  padding: 10px;
  border: 2px solid green;
  position: absolute;
}
#veg {
  width: 200px;
  height: 120px;
  left: 340px;
  top: 150px;
  padding: 10px;
  border: 2px solid green;
  position: absolute;
}
article {
  background-color: aqua;
  height: 170px;
  width: 482px;
  float: right;
  padding: 5px;
}
ul {
  margin: left;
  column-count: 3;
  width: 50%;
  text-align: left;
  list-style: none;
}
li {
  list-style-type: none;
  padding: 5px;
  margin: 2px;
  background-color: #CCCCFF;
  border: 2px double #CCCCCC;
}
footer {
  background-color: black;
  color: white;
  clear: both;
  text-align: center;
  padding: 5px;
}

参见小提琴：https://jsfiddle.net/cq2aw1dy/3/

Answer 1

在开始之前-应该注意的是，在target2.onDrop函数中，您说document.getElementById("data")的最后一行不应该有任何引号。这会给你带来一些问题。

由于你所有的水果都有ID，我认为使用classes会更好。这样做的方法是在掉落的元素中添加一个class，告诉它变得不可见。

CSS

#fruit > .hiddenDrop, #veg > .hiddenDrop {
    display: none;
}

Javascript-将其放在.onDrop()函数中

var element = document.getElementById(data);
element.setAttribute('class', 'hiddenDrop');
target.appendChild(element);

这样做的目的是在元素被删除后，它将类hiddenDrop添加到该元素中，然后将其display属性更改为none

Answer 2

编辑

你可以用像#fruit > *{display: none;} 这样的css来做

这意味着，如果您拖动到水果div中，display将设置为none。

参见小提琴：

https://jsfiddle.net/cq2aw1dy/4/