外面摆满了球，球上有字，设置三个框，框上有对应条件，拖动小球进入对应的框，如果答对则弹出对话框，写出相对应的代码

这个需求可以通过HTML、CSS和JavaScript来实现。以下是一个简单的实现例子：

HTML代码：

<div id="container">
  <div id="box1" class="box">
    <p>条件1</p>
  </div>
  <div id="box2" class="box">
    <p>条件2</p>
  </div>
  <div id="box3" class="box">
    <p>条件3</p>
  </div>
  <div id="ball1" class="ball" draggable="true" ondragstart="drag(event)">
    <p>球1</p>
  </div>
  <div id="ball2" class="ball" draggable="true" ondragstart="drag(event)">
    <p>球2</p>
  </div>
  <div id="ball3" class="ball" draggable="true" ondragstart="drag(event)">
    <p>球3</p>
  </div>
</div>

CSS代码：

.box {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  margin: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ball {
  width: 50px;
  height: 50px;
  background-color: blue;
  color: white;
  border-radius: 50%;
  margin: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

JavaScript代码：

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 targetBox = ev.target;
  var targetCondition = targetBox.querySelector('p').innerHTML;
  var ballCondition = document.querySelector(`#${data} p`).innerHTML;

  if (targetCondition === ballCondition) {
    alert("答对了！");
  }
}

在这个例子中，我们使用了HTML5中的拖放API来实现球的拖动和放置。当球被拖动时，它的ID会被传递到`drag()`函数中，当球被放置时，`drop()`函数会被调用。在`drop()`函数中，我们会获取目标框的条件和球的条件，如果它们相同，则弹出对话框提示答对了。