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/

＆＃13;

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

＆＃13;

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

＆＃13;

<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">

＆＃13;

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

删除图片后，您将获得放置区中childNodes的数量（我已在browser console中对其进行了安慰。）

Answer 2

检查下面的代码，以限制拖放。

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

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

 drop = function(ev) {
    ev.preventDefault();
    var limit = 4;
    //document.getElementById(ev.target.id).childNodes.length contains the count/no.of images
    if(document.getElementById(ev.target.id).childNodes.length < limit){
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));    
    }else{ 
      alert('you cannot drop images here. maximum limit reached..');
      return;
    }
}

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

2 个答案: