javascript - 计算项目被拖动的次数

Question

我想在每次将项目拖入可拖动区域时进行计数，并在每次发生时增加输入字段内的计数器。

这是我现在所拥有的：

function cancel(e) {
    if (e.preventDefault) {
        e.preventDefault();
    }
    return false;
}

var dragItems = document.querySelectorAll('[draggable=true]');

for (var i = 0; i < dragItems.length; i++) {
    addEvent(dragItems[i], 'dragstart', function (event) {
        // store the ID of the element, and collect it on the drop later on
        event.dataTransfer.setData('Text', this.alt);
    });
}

var drop = document.querySelector('.drop-items');
var droplist = document.querySelector('.items-listed-rc');

// Tells the browser that we *can* drop on this target
addEvent(drop, 'dragover', cancel);
addEvent(drop, 'dragenter', cancel);

addEvent(drop, 'drop', function (e) {
    if (e.preventDefault) e.preventDefault(); // stops the browser from redirecting off to the text.

    this.innerHTML += '<p>' + e.dataTransfer.getData('Text') + '<input type="text" class="counter-items"></p>';
    return false;
    return false;
});

这是小提琴：

http://jsfiddle.net/czbHM/

Answer 1

尝试这个：

 addEvent(drop, 'drop', function (e) {
    if (e.preventDefault) e.preventDefault(); // stops the browser from redirecting off to the text.
    var thatText = e.dataTransfer.getData('Text');
    if (!this.innerHTML.match(thatText)) {
        var p = document.createElement('p');
        var text = document.createTextNode(thatText);
        var input = document.createElement('input');
        input.className = "counter-items";
        input.value = "1";
        input.type = 'text';
        p.appendChild(text);
        p.appendChild(input);
        this.appendChild(p);
    } else {
        var childs = this.children;
        console.log(childs);

        function addValue(childs) {
            var thisValue = childs[i].children[0].value;
            childs[i].children[0].value = parseInt(thisValue, 10) + 1;
        }
        for (var i = 0; i < childs.length; i++) {
            if (thatText == "Scissors" && childs[i].innerText == "Scissors") {
                addValue(childs);

            } else if (thatText == "Hand" && childs[i].innerText == "Hand") {
                addValue(childs);
            }
        }
    }
});

我不得不说你离解决方案还很远。主要问题之一是使用，this.innerHTML += ....因为它不会在加载后更新文档，因此您必须使用 javascript 创建实际元素。

其余的是一种开关。如果要添加更多项目，可以添加 elseIfs 或使用开关。 你可以在这里查看更新的小提琴