Resizable方法上的JQuery文档(特别是handles选项)表明我可以设置任何句柄来使用自定义的HTML元素。我设法使用默认的可调整大小的句柄来获得可调整大小的文本框，但是尝试设置自定义的句柄(即我在标记中定义的HTML元素)会产生以下问题：可调整大小的容器留下正确的空间底部处的div句柄(用于南方句柄)，但是将空格留空，并显示可调整大小的容器下面的元素(使用Firebug验证)。
这是我的标记(ASP.NET/XHTML)和JavaScript代码：
<asp:TextBox runat="server" ID="codeTextBox" TextMode="MultiLine" Wrap="false" Rows="15"> </asp:TextBox> <div class="resizable-s" style="width: 100%; height: 22px; background: red;"> </div> <script type="text/javascript"> $(function() { var codeTextBox = $("#<%= codeTextBox.ClientID %>"); codeTextBox.resizable({ handles: { s : $(".resizable-s") },minHeight: 80,maxHeight: 400 }); }); </script>
当然，我无法使可调整大小的句柄div(class resizable-s)是TextBox / textarea的一个小孩，但根据JQuery文档，这不应该是一个问题。
根据我所做的搜索，我不是唯一有这个问题的人。 (不幸的是，JQuery文档不能给出一个使用自定义可调整大小的句柄的例子，所以我们都不能确切地确定正确的代码。)如果有人可以建议修复这个，或者确认它是一个JQuery错误，这将非常感激。
解决方法
问题是鼠标事件被初始化为可调整大小的元素(或在textarea的情况下是包装元素)。如果句柄不是处理鼠标事件的小孩，则它不会在句柄上触发mousedown事件，因此不会使其拖动。
作为一个概念证明，我在jquery-ui中修补了一些，直到我得到了一些工作。对代码没有保证，但它应该指出需要进行什么样的更改才能使其运行。
在ui.resizable.js中的第140行，我改变了：
this._handles = $('.ui-resizable-handle',this.element)
.disableSelection();
至
this._handles = $('.ui-resizable-handle')
.disableSelection();
然后，在调用可调整大小的元素的mouseInit之后，我添加了以下代码(ui.core.js中的一部分mouseInit，大概应该使用整个函数)在ui.resizable.js(第180行)中)
...
//Initialize the mouse interaction
this._mouseInit();
// Add mouse events for the handles as well - ylebre
for (i in this.handles) {
$(this.handles[i]).bind('mousedown.resizable',function(event) {
return self._mouseDown(event);
});
}
这允许我做一个不可调整大小的元素的调整大小的句柄。我的句柄是一个id为“南”的div，并附加到可调整大小的元素上。这是HTML snippit：
<textarea id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">Resizable</h3>
</textarea>
<div id="south" class="ui-resizable-handle">south</div>
和JavaScript代码：
$("#resizable").resizable(
{handles: {s: document.getElementById("south")}}
);
希望这可以帮助！
