Изменяемый размер блока для Internet Explorer.Проблема с событием MouseMove - PullRequest
Новая
       1

Изменяемый размер блока для Internet Explorer.Проблема с событием MouseMove

0 голосов
/ 16 февраля 2011

Я хочу сделать изменяемый размер блока (<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?

1 Ответ

1 голос
/ 16 февраля 2011

Если удовлетворяет jqueryui.resizable, за исключением положения дескриптора, вы можете использовать здесь опцию handles, дескрипторы могут быть определены на каждой стороне, которую вы хотите:

$ ('. ChatBlockBody'). Resizable ({handles: 'nw'});

...