/* 팝업 드래그 이동 스크립트 */
var img_L = 0;
var img_T = 0;
var targetObj;
function getLeft(o){
return parseInt(o.style.left.replace('px', ''));
}
function getTop(o){
return parseInt(o.style.top.replace('px', ''));
}
// 이미지 움직이기
function moveDrag(e){
var e_obj = window.event? window.event : e;
var dmvx = parseInt(e_obj.clientX + img_L);
var dmvy = parseInt(e_obj.clientY + img_T);
targetObj.style.left = dmvx +"px";
targetObj.style.top = dmvy +"px";
return false;
}
// 드래그 시작
function startDrag(e, obj){
targetObj = obj;
var e_obj = window.event? window.event : e;
img_L = getLeft(obj) - e_obj.clientX;
img_T = getTop(obj) - e_obj.clientY;
document.onmousemove = moveDrag;
document.onmouseup = stopDrag;
if(e_obj.preventDefault)e_obj.preventDefault();
}
// 드래그 멈추기
function stopDrag(){
document.onmousemove = null;
document.onmouseup = null;
}
[사용방법]
<div style='position:absolute; left:0px; top:0px; cursor:pointer; cursor:'hand' onmousedown='startDrag(event, this)'>
<table bgcolor="#0000FF"><tr><td>
<font color="#FFFFFF">테스트</font>
</td></tr></table>
</div>
'웹관련 > JavaScript-Jquery' 카테고리의 다른 글
[자바스크립트] 기초 - 시간함수 setInterval/clearInterval (0) | 2016.09.23 |
---|---|
[자바스크립트] Input창에 도메인선택시 입력되게 하는 방법 (0) | 2016.09.22 |
[자바스크립트] 자바스크립트 기초 공부하자!! (0) | 2016.09.22 |
[자바스크립트] Cookie 함수로 정의하기 (0) | 2016.09.22 |
[Jquery] 종종헷갈리는 - text(),html(),val(),attr() (0) | 2016.09.22 |
댓글