메뉴 건너뛰기

프로그램언어

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
번호 제목 날짜 조회 수
180 방금 INSERT 했던 SQL 문의 PK(primary key)값 가져오기 2018.07.04 5321
179 PHP 휴대폰번호 짜르기 (preg_replace) "-" 넣기. 형식바꾸기 2018.07.04 4054
178 [이클립스]PHP 개발환경 만들기 file 2018.07.04 7936
177 MySQL(MariaDB) 테이블 만들기 2018.03.28 8150
176 PHP 네이버블로그 원격 글쓰기 API 소스 file 2018.02.09 12463
175 PHP에서 암호화 encrypt 복호화 decrypt 해서 값을 넘기기 2018.02.09 10626
174 base64 인코딩/디코딩 함수의 특징 file 2018.02.09 13078
173 PHP 날짜 함수 2017.04.13 17673
172 PHP, $_SERVER 변수 2017.04.13 19505
171 정규식 2017.04.13 17599
170 파일시스템, 폼 파일업로드 관련 함수 2017.03.27 21681
169 네이버 자동 띄어쓰기를 이용하기 2017.03.27 17940
168 php 엑셀 다운로드 구현 2017.03.07 29782
167 두 날짜 사이의 차이 구하기 2017.03.07 18866
166 날짜 일수 차이 계산 2017.03.07 19977
165 php 세션 유지시간 늘리기 2017.03.07 26307
164 리다이렉션(페이지 이동)의 3가지 방법, location.href 2017.03.07 40078
163 자릿수만큼 앞에 0 붙이기 2017.03.07 19026
162 세션 시작 / 세션 데이터 추가 / 세션 데이터 삭제 / 세션 종료하기 2017.03.07 19102
161 도메인 앞에 자동으로 WWW를 붙이는 방법 2017.03.07 18884
Board Pagination Prev 1 ... 4 5 6 7 8 9 10 11 12 13 ... 17 Next
/ 17

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

© k2s0o1d4e0s2i1g5n. All Rights Reserved