Wie bekomme ich Daten zur Laufzeit in jquery?

Question

Ich verwende Drag & Drop-Ereignis, um einige Bilder in einem div zu ziehen. Ich möchte die Anzahl der Objekte/Bilder, die zur Laufzeit gelöscht werden, zählen und die Anzahl der Bilder in diesem Teil begrenzen. Wie kann ich dies mit jquery tun?

Es folgt der Code für Fallenlassen der Bilder:

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

-Code funktioniert nur Bilder zum Abwerfen aber nicht für Bilder zu zählen. Was ist falsch an diesem Code?

Answer 1

Hier können Sie mit einer Lösung 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">

Hier in der Lösung gehen, ich habe 2 Bilder, die in den obigen Behälter fallen gelassen werden kann.

Sobald Sie ein Bild fallen lassen, erhalten Sie die Nummer childNodes in der Drop-Zone (Ich habe es in der browser console getröstet).

Answer 2

Überprüfen Sie den folgenden Code, der Drag & Drop begrenzt.

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