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-code如下：

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满足除了句柄的位置，你可以在那里使用handles-option，可以在你想要的每一面定义句柄：

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

适用于Internet Explorer的可调整大小的块。 MouseMove事件的问题

1 个答案: