title: Moveable/draggable <div>
body: <p>This is my updated and modified script, it works completely, except I would like to universalize it... observe the **** how can I make it so that I don't have to do <code>function(e){BOX.Draggable.elemen = e.target || e.srcElement; elementDraggable(e);</code> everytime I need to use the dragable function for a different element?</p>
  
  <pre><code>window.onload = addListeners;
  
  var BOX = function(){
    return{
      Draggable: function(){}
    };
  }();
  
  function addListeners(){
    document.getElementById('div').addEventListener('contextmenu', menumove, false);
    **document.getElementById('div').addEventListener('mousedown', function(e){BOX.Draggable.elemen = e.target || e.srcElement; elementDraggable(e);}, false);**
  }
  
  function elementDraggable(e){
    var e = e || window.event;
    var div = BOX.Draggable.elemen;
    BOX.Draggable.innerX = e.clientX + window.pageXOffset - div.offsetLeft;
    BOX.Draggable.innerY = e.clientY + window.pageYOffset - div.offsetTop;
  
    window.addEventListener('mousemove', elementMove, false);
    window.addEventListener('mouseup', function(){
      window.removeEventListener('mousemove', elementMove, false);
      }, true);
  
    function elementMove(e){
      div.style.position = 'absolute';
      div.style.left = e.clientX + window.pageXOffset - BOX.Draggable.innerX + 'px';
      div.style.top = e.clientY + window.pageYOffset - BOX.Draggable.innerY + 'px';
    }
  }
  </code></pre>