拖放多个项目html5 [英] Drag and drop multiple items html5

问题描述

我有一个简单的html5拖放。

I have a simple html5 drag and drop.

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-

我的问题是我可以放下同一字段中有多个项目。我该如何预防？我希望当我将项目拖放到字段中时，再也不能再删除另一个项目了，当我将该项目拖出字段时，我希望它再次可拖放。

My problem is that I can drop multiple items in the same field. How can I prevent that? I'd like when I drop the item in the field, then there can't be no longer droped another item and when I drag the item out of the field, I'd like it to become dropable again.

感谢帮助。

推荐答案

仅当字段为空时才完成放置操作问题。

Only finish the drop if the field is empty solves the problem.

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

这篇关于拖放多个项目html5的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！