메뉴 건너뛰기

프로그램언어

2014.02.27 10:32

Record Drag/Drop Position

조회 수 29201 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
<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>

List of Articles
번호 제목 날짜 조회 수
340 무조건 알아야 할 PHP 속도 테스트 14 가지 2014.02.27 30279
339 Class를 이용한 DB Connection 소스 (Oracle, MyS 2014.02.27 30503
338 Text를 GD 이미지로 뿌리기 2014.02.27 29811
337 PHP로 Excel 파일 만들기... 2014.02.27 30257
336 PHP에서 PDF파일 생성하기 2014.02.27 32768
335 DB상의 많은 파일을 한꺼번에 다운받기 2014.02.27 28330
334 GD를 이용한 스팸성 게시물 차단을 위한 보안 단어 입력 예제 2014.02.27 26945
333 쿠키변수받기 2014.02.27 29211
332 글내용 이미지 리사이징 2014.02.27 29446
» Record Drag/Drop Position 2014.02.27 29201
330 로또 숫자 랜덤하게 1~45까지 숫자 빼오기 2014.02.27 25432
329 주간날짜 뽑아오기 2014.02.27 26731
328 PHP에서 자바스크립트 값 가져오기 2014.02.27 31635
327 페이지 로딩 시간 측정 2014.02.27 26041
326 유용한 함수 모음 2014.02.27 21421
325 날짜 계산하기 (하루전 날짜 구하기) 2014.02.27 21619
324 $_SERVER변수 2014.02.27 24443
323 엔터의 표현 2014.02.27 19535
322 필드값 저장 2014.02.27 24275
321 리스트 페이징 2014.02.27 19373
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 17 Next
/ 17

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved