Internet Explorer的可調整大小的塊。 MouseMove事件有問題

Question

我想製作可調整大小的塊（<div>）。當用戶抓住塊的左上角時，它必須調整大小。這是類似於http://jqueryui.com/demos/resizable/，但左上角，而不是右下角。

HTML代碼： <div class="chatBlockBody"> <img src="resizeMarker.png" class="topMarker" alt="" /> content of block </div>

CSS代碼：

.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; 
    } 

的JS-代碼如下：

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"); 
    } 
}); 

它工作正常的Chrome和Firefox。但它在IE中不起作用。 當用戶通過按下鼠標按鈕移動鼠標時，IE不執行鼠標移動代碼。所以，它沒有重繪div的邊界。

我該如何修復它，併爲IE做出可調整大小的塊？

Answer 1

如果jqueryui.resizable是令人滿意的，除了手柄的位置，你可以使用手柄選項存在，手柄可以在每邊來定義你想：

$（「 chatBlockBody」）。 resizable（{handles：'nw'}）;