PHP - Record Drag/Drop Position

<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>
Record Drag/Drop Position

단축키

Articles
