<head>
<title>Record Drag/Drop Position</title>
<script type="text/javascript">
// Write session or persistent cookies
function setCookie(cookieName,cookieValue,cookieExpiration) {
if (cookieExpiration!=null) {
// Cookie has a duration / date object is expected
document.cookie=cookieName + "=" + escape(cookieValue) + ";path=/;expires=" + cookieExpiration.toGMTString()
} else {
// Cookie has no duration / it will remain only for the browser session
document.cookie=cookieName + "=" + escape(cookieValue) + ";path=/"
}
}
// Get cookie value
function getCookie(cookieName) {
cookieString=document.cookie
cookieName+="="
// If at least one cookie exists...
if (cookieString.length>0) {
// Search for the cookie name
i=cookieString.indexOf(cookieName)
// If the cookie name exists, return its value
if (i!=-1) {
i += cookieName.length
j = cookieString.indexOf(";",i)
if (j==-1) {j = cookieString.length}
return unescape(cookieString.substring(i,j))
}
}
// Return a null value if the cookie doesn't exist
return null
}
// Delete a cookie
function deleteCookie(cookieName) {
// Get a date object for the 1st january 1970
cookieExpiration = new Date(1970,0,1)
// Set cookie value to an empty string and its expiration date to the 1st january 1970
document.cookie=cookieName + "=;path=/;expires=" + cookieExpiration.toGMTString()
}
// Get object left position, even if nested
function getAbsLeft(o) {
oLeft = o.offsetLeft
while(o.offsetParent!=null) {
oParent = o.offsetParent
oLeft += oParent.offsetLeft
o = oParent
}
return oLeft
}
// Get object top position, even if nested
function getAbsTop(o) {
oTop = o.offsetTop
while(o.offsetParent!=null) {
oParent = o.offsetParent
oTop += oParent.offsetTop
o = oParent
}
return oTop
}
// Set object left position
function setLeft(o,oLeft) {
o.style.left = oLeft + "px"
}
// Set object top position
function setTop(o,oTop) {
o.style.top = oTop + "px"
}
// Set object top and left positions
function setPosition(o,oLeft,oTop) {
setLeft(o,oLeft)
setTop(o,oTop)
}
// Mouse button down handler
function dragMouseDown(e)
{
// Get the event object for IE
if (!e) {e = window.event}
// Dragging begins...
doDrag=true
// Get a reference to the dragged object
o=document.getElementById("draggedObject")
// Get original top and left positions of the dragged object
oLeft=getAbsLeft(o)
oTop=getAbsTop(o)
// Get the mouse cursor position into the dragged object surface
mouseLeft=e.clientX-oLeft
mouseTop=e.clientY-oTop
}
// Mouse button up handler
function dragMouseUp(e)
{
// Dragging stops
doDrag=false
// Get the event object for IE
if (!e) {e = window.event}
// Store the position of the dragged object
// as a cookie / the cookie value is a snippet of JavaScript
oLeft = e.clientX-mouseLeft
oTop = e.clientY-mouseTop
cookieValue = "var oLeft=" + oLeft + ";" + "var oTop=" + oTop
setCookie("recPos",cookieValue,expirationDate)
}
// Mouse move handler
function dragMouseMove(e)
{
// Get the event object for IE
if (!e) {e = window.event}
// If dragging is on going...
if (doDrag)
{
// Get a reference to the dragged object
o=document.getElementById("draggedObject")
// Set the top and left positions of the dragged object relatively to the mouse cursor
oLeft = e.clientX-mouseLeft
oTop = e.clientY-mouseTop
setPosition(o,oLeft,oTop)
// Stop event propagation
return false
}
}
// Show last recorded position
function getRecPos()
{
alert(getCookie("recPos"))
}
// At page load, look for a recorded position
// If so, move the dragged object to the last recorded position
function setRecPos()
{
cookieValue = getCookie("recPos")
if (cookieValue!=null)
{
// Interpret the snippet of JavaScript stored in the cookie
eval(cookieValue)
// Move the dragged object to the last recorded position
o=document.getElementById("draggedObject")
setPosition(o,oLeft,oTop)
}
}
// Set the expiration date 5 days ahead in the time
expirationDate = new Date()
expirationDate.setDate(expirationDate.getDate() + 5)
doDrag=false
mouseLeft=0
mouseTop=0
document.onmousemove = dragMouseMove
</script>
</head>
<body onload="setRecPos()">
<div id="draggedObject" style="position:absolute;top:100px;left:100px;width:80px;height:80px;cursor:pointer;cursor:hand;background-color:green" onmousedown="dragMouseDown(event)" onmouseup="dragMouseUp(event)"></div>
<button onclick="getRecPos()">Get recorded position</button></br>
Drag object, close the demo page and re-open it to see the end result.
</body>
</html>