js 테이프 드래그 실현

  
  


  

    
   
  


  //      
  (function(){
    //      
    var oDiv1=document.getElementById('div1')
    var oDrag1=document.getElementById('drag1')
    oDrag1.onmousedown=function(ev){
      var oEvent=ev||event
      //             
      var pos=getMousePosition(oEvent)
      var disX=pos.x - oDrag1.offsetLeft
      var disY=pos.y - oDrag1.offsetTop
      //     
      var oBox=document.createElement('div')
      oBox.className='box'
      oBox.style.width=oDrag1.offsetWidth-2+'px'
      oBox.style.height=oDrag1.offsetHeight-2+'px'
      //        ,        
      oBox.style.left=oDrag1.offsetLeft+'px'
      oBox.style.top=oDrag1.offsetTop+'px'
      //  oDiv1    ，       
      oDiv1.appendChild(oBox)
      //     
      if(oBox.setCapture){
        //   Ie7-11
        oBox.onmousemove=mouseMove
        oBox.onmouseup=mouseUp
        //            
        oBox.setCapture()
      }else{
        //   FF,Chrome
        document.onmousemove=mouseMove
        document.onmouseup=mouseUp
      }

      //         
      function getMousePosition(ev){
        // scrollTop             
        var scrollTop=document.documentElement.scrollTop||document.body.scrollTop
        var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft
        return {x:ev.clientX + scrollLeft,y:ev.clientY+scrollTop}
      }

      //          
      function mouseMove(ev){
        //          l,t
        var oEvent=ev||event
        var pis=getMousePosition(oEvent)
        var l=pis.x-disX
        var t=pis.y-disY

        oBox.style.left=l+'px'
        oBox.style.top=t+'px'
      }

      //           
      function mouseUp(){
        //               
        this.onmousemove=null
        this.onmouseup=null
        oDrag1.style.left=oBox.offsetLeft+'px'
        oDrag1.style.top=oBox.offsetTop+'px'
        //            
        oDiv1.removeChild(oBox)
        if (oBox.releaseCapture) {
          oBox.releaseCapture()
        }
      }
      // FF       
      return false
    }
  })();