If you need the aElts array for some other part of the program, than I have added it to the script.
But you must understand that the aElts array has nothing to do with the drag&drop functions.
I have merely added it to the script for other purposes you may have, but otherwise it is only adding time to the script and serves no purpose to the script.
HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Drag, Snap and Sort</title>
<link rel="stylesheet" type="text/css" href="../../newwalterzorn.css">
<style>
#dragItemsContainer
{
width:200px;
padding:10px;
padding-bottom:5px;
border:1px solid #000;
background:#ddd;
}
.commonStyle
{
position:relative;
width:200px;
height:15px;
margin-bottom:5px;
font-size:12px;
}
#lyr0{background:red;}
#lyr1{background:green;}
#lyr2{background:blue;}
#lyr3{background:yellow;}
#lyr4{background:purple;}
</style>
</head>
<body>
<script type="text/javascript" src="wz_dragdrop.js"></script>
<div id="dragItemsContainer">
<div class="commonStyle" id="lyr0">Item 1</div>
<div class="commonStyle" id="lyr1">Item 2</div>
<div class="commonStyle" id="lyr2">Item 3</div>
<div class="commonStyle" id="lyr3">Item 4</div>
<div class="commonStyle" id="lyr4">Item 5</div>
<div>
<script type="text/javascript">
<!--
SET_DHTML(CURSOR_MOVE,"lyr0","lyr1","lyr2","lyr3","lyr4");
var sElementPosX,sElementPosY,sElementName,dElementName,dropTarget,picElementPos,dropElementPos;
var aElts = new Array("lyr0","lyr1","lyr2","lyr3","lyr4");
function my_PickFunc(){
sElementPosX=dd.obj.x;
sElementPosY=dd.obj.y;
sElementName=dd.obj.name;
for(var i=0;i<aElts.length;i++){if(sElementName == aElts[i]){picElementPos = i;}}
}
function my_DropFunc(){
dropTarget=dd.obj.getEltBelow();
dropTarget!=null?swapElements():restoreElement();
dElementName=dropTarget.name;
for(var i=0;i<aElts.length;i++){if(dElementName == aElts[i]){dropElementPos = i;}}
arrange_aElts_Elements();
}
function swapElements(){
dd.obj.moveTo(dropTarget.x,dropTarget.y);
dd.elements[dropTarget.name].moveTo(sElementPosX,sElementPosY);
}
function restoreElement(){
dd.obj.moveTo(sElementPosX,sElementPosY);
}
function arrange_aElts_Elements()
{
var tempName1 = aElts[picElementPos];
var tempName2 = aElts[dropElementPos];
aElts[picElementPos] = tempName2;
aElts[dropElementPos] = tempName1;
}
-->
</script>
</body>
</html>