如何根据图标的拖放隐藏/显示 div

Question

大家早上好，

我的项目的目标是具有拖放功能，其中...一旦我将图标拖到下拉框，它就会显示隐藏的文本 div。 因此，重申一下 - 在图标被删除后，它会显示一个隐藏的 div。 这个想法可能是调用 function 来更改“放置”function 主体末尾的 div 的显示。 但是，恐怕 function 永远不会被调用。 也许是因为没有调用“drop”function？ 我不确定.. 请参阅下面的一些代码。

另外，当我运行我的项目时.. javascript 和 html 是否要求 UI 上显示的更改始终通过某种按钮/点击事件进行？ 可以通过简单的 function 调用在 UI 上显示更改吗？

我的第一个问题见下面的代码：JS代码：

$.getJSON('http://api.weatherstack.com/current?access_key=xxxxx=New_York', function(data){
    var display = `${data.location.region}<br>
                   ${data.location.lat}<br>
                   ${data.location.lon}<br>
                   Degree's celcius: ${data.current.temperature}`
    $(".display1").html(display);

  });

  function allowDrop1(ev) {
    ev.preventDefault();
  }
  
  function drag1(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
  }
  
  function drop1(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
    myFunction1();
  }

  
  function myFunction1() {
    var x = document.getElementsByClassName("display1");
    if (x.style.display === "none") {
      x.style.display = "block";
    } else {
      x.style.display = "none";
    }
  }

一些 html：

    <div id = "weatherbox" class="flex-container">
        <div class="display1" style="order: 1"></div>
        <div class="display2" style="order: 2"></div>
        <div class="display3" style="order: 3"></div>    
    </div>
    <br>
    <div class="flex-container">
        <div id="div1" class="dropbox" ondrop="drop1(event)" ondrop="myFunction1()" ondragover="allowDrop1(event)"></div>
        <div id="div2" class="dropbox" ondrop="drop2(event)" ondragover="allowDrop2(event)"></div>
        <div id="div3" class="dropbox" ondrop="drop3(event)" ondragover="allowDrop3(event)"></div>
    </div>
    <br>
    <br>
    <div class="flex-container">
        <div class="startbox"><i id="drag1" draggable="true" ondragstart="drag1(event)" width="336" height="69" class='far fa-arrow-alt-circle-up'></i></div>
        <div class="startbox"><i id="drag2" draggable="true" ondragstart="drag2(event)" width="336" height="69" class='far fa-arrow-alt-circle-up'></i></div>
        <div class="startbox"><i id="drag3" draggable="true" ondragstart="drag3(event)" width="336" height="69" class='far fa-arrow-alt-circle-up'></i></div>
    </div>

我也尝试使用事件发射器来根据图标的放置显示 div，但是我认为 nodejs 事件发射器与客户端应用程序不兼容。

Answer 1

幸运的是，已经有一个事件是ondrop ：

 drag1.addEventListener('ondrop', function() { hiddenElt.style.display = 'block'; });

将图标拖到下拉框后，隐藏的项目就会出现。