javascript - jquery如何在运行时获取数据？

Question

我正在使用拖放事件在 div 中拖动一些图像。我想计算运行时丢弃的对象/图像的数量，并限制该 div 中的图像数量。我如何使用 jquery 执行此操作？

下面是删除图片的代码:

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    /*
    var countDrv = $("[name=Driver]").val;
    for (i = 0; i < countDrv.length) {
        if (countDrv > 2) {
            alert("Drivers should not be more than two");
        }
    }
    */
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}

代码仅适用于丢弃图像，不适用于计数图像。这段代码有什么问题？

Answer 1

给您一个解决方案 https://jsfiddle.net/92r4sLcL/

 allowDrop = function(ev) {
    ev.preventDefault();
}

 drag = function(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

 drop = function(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
    console.log(document.getElementById('div1').childNodes.length);
}

#div1 {
    width: 350px;
    height: 200px;
    padding: 10px;
    border: 1px solid #aaaaaa;
}

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="http://via.placeholder.com/350x150" draggable="true" ondragstart="drag(event)" width="336" height="69">
<img id="drag2" src="http://via.placeholder.com/350x150" draggable="true" ondragstart="drag(event)" width="336" height="69">

在解决方案中，我有 2 个图像可以放入上面的容器中。

一旦你拖放了一张图片，你就会得到拖放区中childNodes的数量(我已经在浏览器控制台中设置了它)。