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

Question

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

关于 Resizable 的 JQuery 文档方法(特别是在 handles 选项上的方法)建议我可以设置任何句柄以使用自定义 HTML 元素。我已经设法使用默认的可调整大小的句柄使可调整大小的文本框工作得很好，但是尝试设置自定义的(即我在标记中定义的 HTML 元素)会产生以下问题:可调整大小的容器为div handle 位于底部(对于 South handle )，但将空间留空并显示可调整大小容器下方(外部)的元素(使用 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(类 resizable-s)成为 TextBox/textarea 的子项，但根据 JQuery 文档，这应该不是问题。

从我所做的搜索来看，我不是唯一遇到此问题的人。 (不幸的是，JQuery 文档没有给出使用自定义可调整大小的句柄的示例，因此我们都无法确定正确的代码。)如果有人可以对此提出修复建议，或者确实确认这是一个 JQuery 错误，将不胜感激。

Answer 1

通过我在 jquery-ui 代码中所做的一些挖掘，我想我可以确认可调整大小元素之外的自定义句柄不起作用。

问题是鼠标事件是为可调整大小的元素(或文本区域中的包装元素)初始化的。如果句柄不是鼠标事件处理位置的子项，则不会触发句柄上的 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 代码片段:

<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")}}
    );

希望这对您有所帮助!