크기 조정이 가능한 인터넷 익스플로러 블록. 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"); 
    } 
}); 

그것은 크롬과 파이어 폭스에 대한 작동합니다. 하지만 그것은 IE에서 작동하지 않았다. 사용자가 마우스 버튼을 누른 상태에서 마우스를 움직이면 IE는 mousemove 코드를 실행하지 않습니다. 그래서 div의 테두리를 다시 그리지 않았습니다.

IE에서 문제를 해결하고 크기를 조정할 수있는 방법은 무엇입니까? 핸들의 위치, 당신이 핸들-옵션을 사용할 수 있습니다 제외하고는 만족 jqueryui.resizable 경우, 핸들이 모든 측면에서 정의 할 수 있습니다

Answer 1

은 당신이 원하는에 :

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