Hello End User,
After reading the instructions for wz_dragdrop (found here:
Drag&Drop for Images and Layers: Interface of the JavaScript Library),
I came up with a very simple solution that allows you to use either relative or absolute positioning.
I have taken the five div's and enclosed them in a div container.
All elements are set to relative positioning.
Please note:
All elements you want to make drag&drop must have their position property set in the CSS ( either relative or absolute).
By using the wz_dragdrop methods, I was able to overcome the 19px minimum height barrier that must have been programmed into your last code.
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,dropTarget;
function my_PickFunc(){
sElementPosX=dd.obj.x;
sElementPosY=dd.obj.y;
}
function my_DropFunc(){
dropTarget=dd.obj.getEltBelow();
dropTarget!=null?swapElements():restoreElement();
}
function swapElements(){
dd.obj.moveTo(dropTarget.x,dropTarget.y);
dd.elements[dropTarget.name].moveTo(sElementPosX,sElementPosY);
}
function restoreElement(){
dd.obj.moveTo(sElementPosX,sElementPosY);
}
-->
</script>
</body>
</html>