Javascript-форум - Проблемы с drop'аньем элемента

Всем привет)
Хочу определить когда объект drag будет перемещён на объект drop, но у меня возникли проблемы с условием.
Сам код:

<html>
	<head>
   <script>
   function getCoords(elem) {
    var box = elem.getBoundingClientRect();
    var body = document.body;
    var docElem = document.documentElement;
    var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop;
    var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;
    var clientTop = docElem.clientTop || body.clientTop || 0;
    var clientLeft = docElem.clientLeft || body.clientLeft || 0;
    var top  = box.top + scrollTop - clientTop;
    var left = box.left + scrollLeft - clientLeft;
    return { top: Math.round(top), left: Math.round(left) };
   }

   window.onload = function() {
    var dr;
    var drag = document.getElementById('drag');

    drag.addEventListener('mousedown', function(e) {
      dr = true;
      e = e || window.event;
      var coords = getCoords(drag);
      var shiftX = e.pageX - coords.left;
      var shiftY = e.pageY - coords.top;
      document.addEventListener('mousemove', function(e) {
        if(dr) {
          e = e || window.event;
          drag.style.position = 'absolute';
          drag.style.zIndex += 1;
          drag.style.left = e.pageX - shiftX + 'px';
          drag.style.top = e.pageY - shiftY + 'px';

          var drop = document.getElementById('drop');
          var dropX = drop.style.left;
          var dropY = drop.style.top;
          var dropW = drop.style.width;
          var dropH = drop.style.height;

          var dragX = drag.style.left;
          var dragY = drag.style.top;
          var dragW = drag.style.width;
          var dragH = drag.style.height;
          var data = 'dropX: '+dropX+'<br>'+
                           'dropY: '+dropY+'<br>'+
                           'dropW: '+dropW+'<br>'+
                           'dropH: '+dropH+'<br><br>'+
                           'dragX: '+dragX+'<br>'+
                           'dragY: '+dragY+'<br>'+
                           'dragW: '+dragW+'<br>'+
                           'dragH: '+dragH+'<br>';

          if((e.pageX >= dropX) && (e.pageX < (dropX + dropW)) && (e.pageY >= dropY) && (e.pageY <= (dropY + dropH))) {
            drop.innerHTML = data + 'Внутри';
          } else {
            drop.innerHTML = data + 'Снаружи';
          }
          document.ondragstart = document.body.onselectstart = null;
        }
      }, false);
    }, false);

    drag.addEventListener('mouseup', function() {
      document.ondragstart = document.body.onselectstart = null;
      document.body.style.userSelect = 'text';
      dr = false;
    }, false);

   }
   </script>
	</head>
<body>
<div id="drag" style="background-color: red; width: 100px; height: 50px;"></div>
<div id="drop" style="background-color: green; width: 200px; height: 200px; left: 150px; top: 100px; position: absolute;"></div>
</body>
</html>

Вот участок кода, в котором, как я думаею, сама проблема:

if((e.pageX >= dropX) && (e.pageX < (dropX + dropW)) && (e.pageY >= dropY) && (e.pageY <= (dropY + dropH)))

Прошу помощи у знающих.