创建允许使用js将可拖动元素放入其中的框

Question

我正在尝试创建一个允许用户将文本拖到框中的网站。我希望用户可以选择使用按钮创建更多框，他们可以将更多文本拖入其中。

我遇到的问题是我无法通过按钮创建一个允许将元素放入其中的框。

我已经粘贴了我在这里尝试做的基础http://jsbin.com/vedapu/3/edit?html,css,js,output。

下面的代码显示了我在单击按钮时创建div的代码。

document.getElementById("text").onclick = function() {
 var div = document.createElement('div');
 div.ondrop = "drop(event)";
 div.ondragover = "allowDrop(event)";
 div.className = "box";
 document.getElementsByClassName('section1')[0].appendChild(div);
}

如何通过drop并允许drop到新div？

Answer 1

你快到了！更改这两行，将字符串值设置为ondrop和ondragover：

 div.ondrop = "drop(event)";
 div.ondragover = "allowDrop(event)";

...对此，它设置了函数：

 div.ondrop = drop;
 div.ondragover = allowDrop;

事件对象将自动包含在第一个函数参数中。