Javascript JS-拖放辅助

我有一个当前正在工作的html/js代码，允许我将4个对象移动到它们各自的DIV属性中，但是，我完全不知道如何在用户将所有图像放在各自的位置后获得弹出警报。如果有人有更好的方法或能为我指出正确的方向，我将不胜感激。下面是我的JSFIDLE链接：

//允许放置对象
功能事件（ev）{
ev.preventDefault（）；
}
//允许图像拖动
功能排气阀（ev）{
ev.dataTransfer.setData（'text'，ev.target.id）；
}
//拖放图像事件
功能下降（ev）{
ev.preventDefault（）；
var data=ev.dataTransfer.getData（'text'）；
//使其仅在某些DIV属性中拖放
if（ev.target.getAttribute（'data-drop'）==数据）
ev.target.appendChild（document.getElementById（数据））；
}

---

如果我需要进一步澄清我想做什么，请告诉我，我希望能有一个更好的方式来表达我想做什么。

您可以添加一个计数器，并检查它是否等于

document.querySelectorAll（“[data drop]”）。length

：

var counter = 0;
function dropPic(ev) {
      ev.preventDefault();
      var data = ev.dataTransfer.getData('text');
      //make it to only drop in certain DIV attribute
      if (ev.target.getAttribute('data-drop') == data) {
           ev.target.appendChild(document.getElementById(data));
           if (++counter == document.querySelectorAll('[data-drop]').length) {
              alert('all done');
           }
      }
}

var counter = 0;
function dropPic(ev) {
      ev.preventDefault();
      var data = ev.dataTransfer.getData('text');
      //make it to only drop in certain DIV attribute
      if (ev.target.getAttribute('data-drop') == data) {
           ev.target.appendChild(document.getElementById(data));
           if (++counter == document.querySelectorAll('[data-drop]').length) {
              alert('all done');
           }
      }
}