Drag and Drop - prevent image overlap

I have a drag and drop code that works fine except I'm trying to prevent images from overlapping. I succeeded in this except that after I drop the image I can no longer drag the image back to it's original place because it recognizes that original place as having an image. Below is the javascript code in its entirety but I believe the issue is in the movemouse function.

I would be very grateful if someone has any thoughts on this.

<script Language="JavaScript">
function winOpen(urlValue, winName) {
   win = window.open(urlValue,winName,'width=750,height=600,status=yes,resizable=yes,scrollbars=yes');
  }
  
  
function submitForm (opr) {
  var theForm = document.CourseList;
  theForm.action.value = opr;
  if ( opr == 'Search' )
    theForm.submit();
  else if ( opr == 'Update' ) {
      answer = confirm("Are you sure you want to update these students?");
      if ( answer == true ) {
        theForm.submit();
      }
  }
  else
    return;
}

var gSelected = -1;
var gDownTime;

function engageMe(num, evt) {
var el = document.getElementById("imgDiv" + num) || document.getElementById("imgDivNewKid" + num);

	gSelected = num;
	gDownTime = new Date();
	el.style.backgroundColor="#ECF2D3";

	return false;

}

function unengageMe(num, evt) {
var el = document.getElementById("imgDiv" + num) || document.getElementById("imgDivNewKid" + num);
el.style.backgroundColor="#FFFFFF";
}

function showAttendanceWindow(num) {
var rowID = document.getElementById("rowID" + num).value;

	winOpen("attperiodselect.html?date=`STRING(TODAY)`&course=" + document.getElementById("courseSectionSeq").value 
	                          + "&sps=" + document.getElementById("schoolPeriodsSeq").value
	                          + "&stu=" + rowID,
	                           "attendace");
}


function positionEm() {
var numKids = document.getElementById("numKids").value;
var i;
var posEl;
var pos;
	for (i = 1; i <= numKids; i++) {
		posEl = document.getElementById("imgPos" + i);
		if (posEl) {
			posArr =  posEl.value.split(',');
			divEl = document.getElementById("imgDiv" + i);
			if (divEl) {
				divEl.style.left = posArr[0];
				divEl.style.top = posArr[1];
			}
		}
	}
}

function Trim(str)
{  while(str.charAt(0) == (" ") )
  {  str = str.substring(1);
  }
  while(str.charAt(str.length-1) == " " )
  {  str = str.substring(0,str.length-1);
  }
  return str;
}

function positionIt(e) {
  initPosSplit =  initPos.value.split(',');
  noPx = /[px]/ig;
  xPos = initPosSplit[0].replace(noPx, "");
  yPos = initPosSplit[1].replace(noPx, "");
  
  var yPosTrimmed;
  yPosTrimmed = Trim(yPos);
  yPosTrimmed = Trim(yPos);
  dobj.style.top = yPosTrimmed;
  dobj.style.left = xPos;
}

var ie=document.all;
var nn6=document.getElementById&&!document.all;

var isdrag=false;
var x,y;
var dobj;

function findPos(obj) { //from www.quirksmode.org
var curleft = curtop = 0;
if (obj.offsetParent) {
curleft = obj.offsetLeft
curtop = obj.offsetTop
while (obj = obj.offsetParent) {
curleft += obj.offsetLeft
curtop += obj.offsetTop
}
}
return [curleft,curtop];
} //end quirksmode code


function movemouse(e)
{
  if (isdrag)
  {
    dobj.style.left = nn6 ? tx + e.clientX - x + "px" : tx + event.clientX - x + "px";
    dobj.style.top = nn6 ? ty + e.clientY - y + "px" : ty + event.clientY - y + "px";
    return false;
  }

  initPos = document.getElementById("imgPos" + gSelected);

    initPosSplit =  initPos.value.split(',');
  noPx = /[px]/ig;
  xPos = initPosSplit[0].replace(noPx, "");
  yPos = initPosSplit[1].replace(noPx, "");

  var numKids = document.getElementById("numKids").value;
  var i;

    if(dobj.offsetLeft < 0 || dobj.offsetTop < 330) {
    positionIt(initPos);
    window.alert("You cannot place the image there.");
}else {
    // check to see if they overlap
    
var numKids = document.getElementById("numKids").value;
var i;
var posEl;
var pos;
var posY;
var PosX;

	for (i = 1; i <= numKids; i++) {	
	if( i != parseInt(gSelected)) {
posY = parseInt(dobj.style.top.replace('px'));
PosX = parseInt(dobj.style.left.replace('px')); 
  //window.alert(i + " " + numKids + " " + gSelected);
	  posEl = document.getElementById("imgPos" + i);	
		if (posEl) {
			posArr =  posEl.value.split(',');
			posArr[0] = parseInt(posArr[0].replace('px'));
			posArr[1] = parseInt(posArr[1].replace('px'));
          myPos = findPos(	document.getElementById("imgPos" + gSelected));
    xStart = myPos[0]; //initial position of image just moved
    yStart = myPos[1];
    
    //if( (PosX >= xStart && PosX < (xStart + `cImgWidth`)) || (PosY >= yStart < (yStart + `cImgHeight`)) )// within the image
//(PosX < xStart && PosX > (xStart + `cImgWidth`)) && (PosY < yStart > (yStart + `cImgHeight`)) &&
			divEl = document.getElementById("imgDiv" + i); 
      if(  (PosX >= posArr[0] && PosX < (posArr[0] + `cImgWidth`)) || (posArr[0] >= PosX && posArr[0] < (PosX + `cImgWidth`))  ){
			 //window.alert(divEl.name);
        positionIt(initPos);
		  	}
			}
		}
  } 
		document.getElementById("imgPos" + gSelected).value = dobj.style.left + ', ' + dobj.style.top;
    }
}

function selectmouse(e) 
{
  var fobj       = nn6 ? e.target : event.srcElement;
  var topelement = nn6 ? "HTML" : "BODY";
  while (fobj.tagName != topelement && fobj.className != "imgDiv" && fobj.className != "imgDivNewKid")
  {
    fobj = nn6 ? fobj.parentNode : fobj.parentElement;
  }

  if (fobj.className=="imgDiv" || fobj.className=="imgDivNewKid")
  {
    isdrag = true;
    dobj = fobj;
    tx = parseInt(dobj.style.left+0);
    ty = parseInt(dobj.style.top+0);
    x = nn6 ? e.clientX : event.clientX;
    y = nn6 ? e.clientY : event.clientY;
    document.onmousemove=movemouse;
    return false;
  }
}

document.onmousedown=selectmouse;
document.onmouseup=new Function("isdrag=false");

</script>

Code (markup):

 

we need a test-url to see the problem in action..