拖放多个项目html5

Question

我有一个简单的html5拖放。

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");
    ev.target.appendChild(document.getElementById(data));
}

这是一个演示：http://kod.djpw.cz/igob-

我的问题是我可以在同一个字段中删除多个项目。我怎么能防止这种情况？我喜欢当我将物品放在田地里时，那时就不能再砍下另一个物品了，当我将物品拖出田地时，我希望它再次变得可褪色

感谢您的帮助。

Answer 1

如果字段为空，则只完成删除才能解决问题。

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    if (ev.target.childNodes.length === 0) {
        ev.target.appendChild(document.getElementById(data));
    }    
}