拖放多个项目html5 | 拖放多个项目html5

本文介绍了拖放多个项目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));
}

这是一个演示：

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

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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！