javascript - 可放置的背景颜色为无不工作

Question

我有两个 div 框，当我将 box002 拖放到另一个 div box001 时，voxoo1 颜色应该变为无；

我想在 javascript 中将背景颜色更改为无。它尝试了 jquery 但没有得到它。

我怎样才能做到这一点？

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

  var el = document.getElementById(data);

  el.parentNode.removeChild(el);
}

box001 {
  float: left;
  width: 150px;
  height: 150px;
  border: 1px solid black;
  border-radius: 10%;
  background-color: #42e0fd;
}

box002 {
  float: left;
  width: 50px;
  height: 50px;
  margin: -50px;
  right: 20px;
  float: left;
  bottom: 0;
  left: 0;
  margin-bottom: 20px;
}

<div class="box001" ondrop="drop(event)" ondragover="allowDrop(event)" id="10" style="background-color: #42e0fd;">
  <p>8:30</p>
</div>

<div class="box002" draggable="true" ondragstart="drag(event)">
  <img src="https://picsum.photos/200/300" draggable="true" id="1" style="width:50px; height:50px; border-radius: 50%;" border="rounded" />
</div>

Answer 1

1. 你的问题在drop函数中使用这个

   document.getElementsByClassName('box001')[0].style.backgroundColor = 'initial';

2. 您尝试使用 className 使用 css 设置样式，因此在 . 之前在 css .className{} 中使用。

请参阅下面的代码和 css 中的一些修复:

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

      var el = document.getElementById(data);

      el.parentNode.removeChild(el);
     document.getElementsByClassName('box001')[0].style.backgroundColor = 'initial';
    }

    .box001 {
      float: left;
      width: 150px;
      height: 150px;
      border: 1px solid black;
      border-radius: 10%;
      background-color: #42e0fd;
    }

    .box002 {
    width: 50px;
    height: 50px;
    margin: -50px;
    top: 76px;
    float: left;
    position: absolute;
    left: 217px;
    }

<div class="box001" ondrop="drop(event)" ondragover="allowDrop(event)" id="10" style="background-color: #42e0fd;">
      <p>8:30</p>
    </div>

    <div class="box002" draggable="true" ondragstart="drag(event)">
      <img src="https://picsum.photos/200/300" draggable="true" id="1" style="width:50px; height:50px; border-radius: 50%;" border="rounded" />
    </div>