Resizable block for internet explorer. Problem with MouseMove event

I want to make a resizable block (<div>). It must resize when user grab the top left corner of the block. It is something like http://jqueryui.com/demos/resizable/ but for top left corner, not for bottom right.

HTML code: <div class="chatBlockBody"> <img src="resizeMarker.png" class="topMarker" alt="" /> content of block </div>

CSS code:

 .chatBlockBody
 {
    width:240px;
    height:250px;
    border:1px solid #4a73ce;
    position:absolute;
    bottom:25px;
    right:0;
    display:block;
    background-color:White;
  }  
  .topMarker
  {
     position:absolute;
     top:3px;
     left:3px;
  }   

The js-code is following:

var dragObject;
$(".topMarker").mousedown(function(e){
   dragObject  = this;
   $(dragObject).parent().css("z-index",42);
   return false;
});

$(document).mouseup(function() {
   dragObject = null;
});

$(document).mousemove(function(event){
   if(dragObject!=null){
       var hg=Math.max($(document).height()-event.pageY,250);
       var wd=Math.max($(document).width()-event.pageX-parseInt($(dragObject).parent().css("right")), 240);
       $(dragObject).parent().css("height",hg+"px");
       $(dragObject).parent().css("width",wd+"px");
   }
});

It works fine for Chrome and Firefox. But it didn't work in IE. IE doesn't execute the mousemove code, when user move mou开发者_如何转开发se with pressed mouse button. So, it didn't redraw the border of div.

How can I fix it and make resizable block for IE?

If jqueryui.resizable is satisfying except the position of the handle, you can use the handles-option there, the handles can be defined on every side you want to:

$('.chatBlockBody').resizable({ handles: 'nw' });