레이어 팝업 드래그(이동) 자바스크립트- [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 위에 있으면 작동을 안하기도 하니 위치를 바꿔가며 작업하면 되겠다..