js、jqドラッグ効果パッケージの例

  
  //js  
  var oDiv = document.getElementById('div1');
  drag(oDiv);
  function drag(obj){
      obj.onmousedown = function(event){
      var disX = event.clientX - this.offsetLeft;
      var disY = event.clientY - this.offsetTop;
      document.onmousemove = function(event){
        var L = event.clientX - disX ;
        var T = event.clientY - disY ;
        
        /*if(L < 0){ // L<80        
          L = 0;
        }else if(L > document.documentElement.clientWidth - obj.offsetWidth){
          L = document.documentElement.clientWidth - obj.offsetWidth;
        }
        if(T < 0){ //if        

          T = 0;
        }else if(T > document.documentElement.clientHeight - obj.offsetHeight){
          T = document.documentElement.clientHeight - obj.offsetHeight;
        }//*/

        obj.style.left = L + 'px';
        obj.style.top = T + 'px';
      }
      obj.onmouseup = function(){
        document.onmousemove= document.onmouseup = null;
      }
      return false;
    }
  } 
  //jq  
    /*var disX = 0;
    var disY = 0;
    $('#div1').on('mousedown',function(ev){
      disX = ev.pageX- $(this).offset().left;
      disY = ev.pageY - $(this).offset().top;
   
    $(document).on('mousemove',function(ev){
      $('#div1').css('left',ev.pageX - disX);
      $('#div1').css('top',ev.pageY - disY);
    })
     $(document).on('mouseup',function(ev){
       $(this).off('mousedown');
       $(this).off('mousemove');
    });
     return false;
  });*/