Jquery Counter For Draggables (even More!!!)

I need further help with the CSS in the following code -this is a continuation of this post: jQuery: Counter for draggables (again!) So, the code below intends to count the number

Solution 1:

So I have found a way around the problem using native HTML5's capabilities and ditching jQuery. The solution, although imperfect, solves the problem of "jumping" elements when dragging them or dropping them in the "wrong" area of the window.

To sum up: use HTML5 native features to make the relevant elements draggable/droppable. Then use document.getElementById("yourDivId").childNodes.length to count the number of children in your droppable area. This is done in the following snippet.

//global variable: number of tokens.var j = 0;

functiondoFirst(){
	
	
	
	//Set intial variables by ref. to objects in the page.
	token1 = document.getElementById('token1');
	token2 = document.getElementById('token2');
	token3 = document.getElementById('token3');
	token4 = document.getElementById('token4');
	token5 = document.getElementById('token5');
	token6 = document.getElementById('token6');
	//as soon as you start to drag token, fire the user's startdrag.
	token1.addEventListener("dragstart", startDrag, false);
	token2.addEventListener("dragstart", startDrag, false);
	token3.addEventListener("dragstart", startDrag, false);
	token4.addEventListener("dragstart", startDrag, false);
	token5.addEventListener("dragstart", startDrag, false);
	token6.addEventListener("dragstart", startDrag, false);
	//Reference tablecloth too.
	tablecloth = document.getElementById('tablecloth');
	// Here you need thre listeners//	1. when something enters table cloth do this...// this bit function(e){e.preventDefault();} overrides different browsers' default// action.
	tablecloth.addEventListener("dragenter",function(e){e.preventDefault();},false);
 	tablecloth.addEventListener("dragover",function(e){e.preventDefault();},false);
	tablecloth.addEventListener("dragleave",leavecloth,false);
	tablecloth.addEventListener("drop",dropped,false);
	
	contador = document.getElementById('contador'); 
	junk = document.getElementById('junk'); 

	
	middleground.addEventListener("dragenter",function(e){e.preventDefault();},false);
	middleground.addEventListener("dragover",function(e){e.preventDefault();},false);
	middleground.addEventListener("dragleave",leavestart,false);
	middleground.addEventListener("drop",droppedout,false);
	
	
}

functionstartDrag(e){
	
	// stands for an event (something) than happens in your browser.// whenever an event occurs the browser stores information about events,// e.g. event of moving mouse -stores x-y position. We will have to stores// infor with our drop/drag event.
	
	e.dataTransfer.setData('Text', e.target.id);
	
	
}

functiondropped(e){
	
	e.preventDefault();
	var data = e.dataTransfer.getData('Text');
	e.target.appendChild(document.getElementById(data));
	
	j = document.getElementById("tablecloth").childNodes.length;
	
	contador.innerHTML = j;
}

functiondroppedout(e){
	
	e.preventDefault();
	var data = e.dataTransfer.getData('Text');
	e.target.appendChild(document.getElementById(data));
		j = document.getElementById("tablecloth").childNodes.length;

	
	contador.innerHTML = j;
}

functionleavecloth(e){
	
	leftcloth = 1;
	junk.innerHTML = 'left cloth' + leftstart+leftcloth;
}
functionleavestart(e){
	
	leftstart = 1;
	junk.innerHTML = 'left start' + leftstart+leftcloth;
}

window.addEventListener("load", doFirst, false); //As soon page loads do this

.mybox{
	
	background-color: SkyBlue;
	width: 100%;
	height: 40%;
	position: absolute;
	bottom: 20%;
	
}
.myfooter{
	
	background-color: Yellow;
	width: 100%;
	height: 20%;
	position: absolute;
	bottom: 0%;
	
}
.tablecloth {
	width: 50%;
	height:40%;
	left: 25%;
	position: absolute;
	 
	border-radius: 28px;
	 
	
	background-color:white;  
	background-image: linear-gradient(90deg, rgba(200,0,0,.5) 50%, transparent 50%),
		linear-gradient(rgba(200,0,0,.5) 50%, transparent 50%);
	background-size:20px20px;
}
	 
.fish  {
	margin:.5em;
	font-size:1.2em;
	position:relative;
	display:inline-block;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	border-radius: 50%;
	
	width: 50px;
	height: 50px; 
	background: #BAB6B2;
	float: left;
	border:.3em  solid #4B027C ;
}

<!DOCTYPE html><htmllang= "en"><head><linkrel = "stylesheet"href = "estilos.css"><scriptsrc = "acciones.js"></script><head><body><divclass = 'tablecloth'id = 'tablecloth'></div><divclass = "mybox"id ='middleground'><divclass = "fish"id = "token1"draggable="true"></div><divclass = "fish"id = "token2"draggable="true"></div><divclass = "fish"id = "token3"draggable="true"></div><divclass = "fish"id = "token4"draggable="true"></div><divclass = "fish"id = "token5"draggable="true"></div><divclass = "fish"id = "token6"draggable="true"></div></div><divclass = "myfooter"><h1><divid = "contador">0</div><br></h1><h1><divid = "junk">nothingmuchs.</div><br></h1></div></body></html>