Drag and Drop - Prevent Image overlap

[rbarnett10]

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

http://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>