Помогите с drag'n'drop
 

Мне нужно перемещать элемент внутри div, а не по всему document.

<div id="myDiv">
<div id='ball3' style="width:66; height:20"></div>
</div>

Модифицирую код из учебника http://learn.javascript.ru/drag-and-...рование

var ball = document.getElementById('ball3');

ball.onmousedown = function(e) {
  var self = this;
  e = fixEvent(e);

  this.style.position = 'absolute';
 
  moveAt(e);

  this.style.zIndex = 1000; // над другими элементами

  function moveAt(e) {
    self.style.left = e.offsetX - 33+ 'px'; //33 - половина ширины перемещаемого блока
    self.style.top = e.offsetY - 10+ 'px'; //10 - половина высоты перемещаемого блока
  }

  document.getElementById('myDiv').onmousemove = function(e) {
    e = fixEvent(e);
    moveAt(e); 
  };

  this.onmouseup = function() {
    document.onmousemove = self.onmouseup = null;
  };

}

ball.ondragstart = function() { 
  return false; 
};

По умолчанию курсор находится в центре перемещаемого блока, При перемещении(как только курсор находится на перемещаемом элементе), перемещаемый элемент начинает прыгать к координатам 0:0, Как сделать так, чтоб при попадании мышки на элемент он не менял своих координат?