JQuery UI中的自定义可调整大小句柄

Question

我一直在尝试创建一个可调整大小的文本框(ASP.NET多行TextBox/ HTML textarea)并使用JQuery UI使其可调整大小,但似乎遇到了一些涉及自定义拖动句柄的问题.

关于该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错误,非常感谢.

Answer 1

从我在jquery-ui代码中进行的一些挖掘,我想我可以确认可调整大小元素之外的自定义句柄不起作用.

问题是鼠标事件是为可调整大小的元素(或textarea的情况下的包装元素)初始化的.如果句柄不是处理鼠标事件的子句,则它不会触发句柄上的mousedown事件,因此不会使其可拖动.

作为一个概念证明,我在jquery-ui中修改了一下,直到我得到了(有点)工作.不保证代码,但它应该指出需要进行哪些更改才能使其工作.

在ui.resizable.js的140行附近,我改变了:

this._handles = $('.ui-resizable-handle', this.element)
    .disableSelection();

至

this._handles = $('.ui-resizable-handle')
    .disableSelection();

然后,在为可调整大小的元素调用mouseInit之后,我在ui.resizable.js(第180行)中添加了以下代码(来自ui.core.js的mouseInit的一部分,可能应该使用整个函数):

   ...
   //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为'south'的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")}}
    );

希望这可以帮助!