Draggable Elements Code






<html><head><title>Michaud's Movable Image Code</title>Dragging_Info_Pic.jpg
<style>
<!--
#sidebar {
width:50%;
border-style:outset;
border-width:20;
background:tan;
float:right;
font-size:18pt;
text-align:justify;
line-height:1em;
padding:15px;
font-family:Century Schoolbook;
}

body{
background:palegoldenrod;
}

#pack1{
position: absolute; left: 505px; top:100;
}

#pack2{
position: absolute; left: 535px; top:100;
}

#pack3{
position: absolute; left: 425px; top:100;
}

#pack4{
position: absolute; left: 460px; top:100;
}

#bag1{
position: absolute; left: 260px;
top:100;

}

#bag2{
position: absolute; left: 80px; top:100;
}

.drag{
z-index:10;
}


-->
</style></head>
<body>
<div id="pack1" class="drag" canDrag>
<img src="pack1.gif" />
</div>

<div id="pack2" class="drag" canDrag>
<img src="pack1.gif" />
</div>

<div id="pack3" class="drag" canDrag>
<img src="pack2.gif" />
</div>

<div id="pack4" class="drag" canDrag>
<img src="pack2.gif" />
</div>

<div id="bag1" class="drag" canDrag>
<img src="bag1.gif" />
</div>

<div id="bag2" class="drag" canDrag>
<img src="bag2.gif" />
</div>
<div>
<h1>Using Dynamic Positioning: Rearranging Elements</h1>
<div id="sidebar">By creating scripts to interact with position and layer information, DHTML allows you to add many special effects and advanced features to your Web pages. One special effect possible with DHTML is <strong>dynamic positioning</strong>. Also known as <strong>dragging</strong>, dynamic positioning combines scripting with style sheet positioning to adjust the position of a selected element based on the coordinates of the mouse pointer, and then assigns the elements to is final position once the user releases the mouse button. This drag feature allows users to rearrange elements into an order that is more useful to them than the page's default orientation or to interact with Web page models and games.</div><br />
</div>

<br /><br /><br />


<script type="text/javascript" language="JavaScript">
<!--
var elDrag = null

function movePointer() {
if ((1 == event.button) && (elDrag != null)) {
var iTop = event.clientY + document.body.scrollTop
var iLeft = event.clientX + document.body.scrollLeft
var iLessTop = 0
var iLessLeft = 0
var elCurr = elDrag.offsetParent
while (elCurr.offsetParent != null) {
iLessTop += elCurr.offsetTop
iLessLeft += elCurr.offsetLeft
elCurr = elCurr.offsetParent
}
elDrag.style.pixelTop = iTop - iLessTop - elDrag.y
elDrag.style.pixelLeft = iLeft - iLessLeft - elDrag.x;
event.returnValue = false
}
}

function checkDrag(elCheck) {
while (elCheck != null) {
if (null != elCheck.getAttribute("canDrag"))
return elCheck
elCheck = elCheck.parentElement
}
return null
}

function butPress() {
var elCurr = checkDrag (event.srcElement)
if (null != elCurr) {
elDrag = elCurr
elDrag.x = event.offsetX
elDrag.y = event.offsetY
var op = event.srcElement
if ((elDrag != op.offsetParent) && (elDrag != event.srcElement)) {
while (op != elDrag) {
elDrag.x += op.offsetLeft
elDrag.y += op.offsetTop
op = op.offsetParent
}
}
}
}

function checkIt() {
return (null == checkDrag (event.srcElement) && (elDrag!=null))
}

document.onmousedown = butPress
document.onselectstart = checkIt
document.onmousemove = movePointer
document.ondragstart = checkIt
document.onmouseup = new Function("elDrag = null")


//-->
</script>
</body></html>