레이어 팝업 드래그(이동) 자바스크립트- [draggable 사용]
<script type="text/javascript">
//레이어팝업 드래그기능
var dragapproved=false
var minrestore=0
var initialwidth,initialheight
var ie5=document.all&&document.getElementById
var ns6=document.getElementById&&!document.all
function iecompattest(){
return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function drag_drop(e){
if (ie5&&dragapproved&&event.button==1){
document.getElementById("divpop1").style.left=tempx+event.clientX-offsetx+"px"
document.getElementById("divpop1").style.top=tempy+event.clientY-offsety+"px"
}
else if (ns6&&dragapproved){
document.getElementById("divpop1").style.left=tempx+e.clientX-offsetx+"px"
document.getElementById("divpop1").style.top=tempy+e.clientY-offsety+"px"
}
}
function initializedrag(e){
offsetx=ie5? event.clientX : e.clientX
offsety=ie5? event.clientY : e.clientY
tempx=parseInt(document.getElementById("divpop1").style.left)
tempy=parseInt(document.getElementById("divpop1").style.top)
dragapproved=true
document.getElementById("divpop1").onmousemove=drag_drop
}
function stopdrag(){
dragapproved=false;
document.getElementById("divpop1").onmousemove=null;
}
</script>
<레이어 팝업 소스>
<div id="divpop1" style='position:absolute;top:100px;left:50px;z-index:200;' onmousedown="initializedrag(event)" onmouseup="stopdrag()" >
<table cellpadding=0 cellspacing=0>
<tr>
<td><img src="/images/popup_121112.jpg" border="0" usemap="#Map"></td>
<map name="Map">
<area shape="rect" coords="0,0,358,690" /> <!--이미지 가로, 세로 크기를 넣어준다-->
</map>
</tr>
</div>
Q1. 소스는 정상적으로 넣었는데, 이미지가 살짝 움직이다 말 경우..?
A. 이때 필요한게, 이미지에 맵을 추가한다..
정확한 이유는 알 수 없으나,
이미지에 맵을 추가한 후 위 소스처럼 이미지 가로/세로 크기를 뒤에 넣어주면
정상적으로 움직이기 시작한다..
[예시 사이트]
http://donggunsanho.drline.net/
LayerPopupDrag.html<- 소스파일 다운
힘들게 자바스크립트 소스 찾아 작업을 했더니만,
단 3줄로 해결되는 Jquery소스 발견..
<script src="http://code.jquery.com/jquery-1.9.1.js"></script><script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script><div id="draggable">Drag me</div><script>$( "#draggable" ).draggable();</script>
[소스 출처: http://api.jqueryui.com/draggable/#entry-examples]
하단 스크립트 구문이 div 위에 있으면 작동을 안하기도 하니 위치를 바꿔가며 작업하면 되겠다..
'일상에서' 카테고리의 다른 글
| 2013 이오스 월드 익스플로러 - 무료로 떠나는 그리스 산토리니 여행 (0) | 2013.03.03 |
|---|---|
| 마계촌을 해본다... (0) | 2013.02.16 |
| dell(델) 2311h - 버튼이 잠겼을 때.. (0) | 2013.01.13 |
| 이런 가죽가방을 갖고 싶다 - 더 스토리 : 세상에 숨겨진 사랑 (0) | 2013.01.08 |
| 3대 오픈마켓에서도 안나오는 페래가모 벨트 (0) | 2012.12.11 |