Drag and Drop - prevent image overlap

[rbarnett]

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>

[Greven]

That's almost unreadable. What section is preventing from dragging onto another image?

[rbarnett]

The following prevents it from dragging onto another image:

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

[Greven]

Are the imgPosX elements something you're using outisde of the images them selves? This seems needlessly complicated.

Are you able to use something like the YUI? It has built in drag and drop, and would simplify your code greatly.

If not, I did notice that you have cImgWidth in quotes. I assume those should not be, as it looks like you want to be doing a numeric comparison, and not a string comparison.

Is dobj the image you're dragging around?

[rbarnett]

PosX and PosY are the x and y positions.

I can look into using something like YUI. I have never heard of it before but will google it.

cImageWidth is a Progress 4gl variable (the language the code is primarily written in) and the quotes are actually back-ticks that define it as Progress 4gl code.

The dobj is the image object name.