CODEWITHSUNDEEP
javascripthtmldrag-and-drop
user3529020
user3529020

Reputation: 86

Drag and drop multiple items 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));
}

Here's a demo: 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.

Thanks for help.

Upvotes: 1

Views: 3498

Answers (1)

ctron
ctron

Reputation: 694

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));
    }    
}

Upvotes: 3

Related Questions