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（类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的一部分，可能应该使用整个函数）： p>

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

希望这有帮助！

Answer 2

是的，对我来说看起来像个错误。这是一个完整的样本，适用于那些在本地尝试的人：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="http://jqueryui.com/latest/themes/base/ui.all.css" type="text/css"/>
  <script src="http://jquery-ui.googlecode.com/svn/tags/latest/jquery-1.3.2.js" type="text/javascript"></script>
  <script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/ui.core.js" type="text/javascript"></script>
  <script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/ui.resizable.js" type="text/javascript"></script>
  <style type="text/css">
    #resizable { width: 100px; height: 100px; background: silver; }
    #southgrip { width: 100px; height: 10px; background-color: blue; }
  </style>
  <script type="text/javascript">
    $(function() {
      $('#resizable').resizable({
        handles: { 's': $('#southgrip') },
        minHeight: 80,
        maxHeight: 400
      });
    });
  </script>
</head>
<body>

<div id="resizable"></div>
<div id="southgrip"></div>

</body>
</html>

This jQuery UI bug 可能相关。

我试过的其他事情：

将'latest'替换为'1.6'，将'jquery-1.3.2'替换为'jquery-1.2.6'，尝试使用旧版本的jQuery UI来查看它是否为回归。看起来不像。
将ui-resizable-s和/或ui-resizable-handle个CSS类添加到#southgrip。没有骰子。然而，如果#southgrip位于#resizable内，则可行。但是，这并不能解决您的问题。
使用{ 's': $('#southgrip').get(0) }作为handles选项。没有骰子。

Answer 3

4年后我遇到了同样的问题。同样他们从来没有解决过这个问题。我虽然使用Interface但自2007年以来没有任何更新。所以我决定自己解决这个问题，并在Github的jQuery UI项目中提出请求。 https://github.com/jquery/jquery-ui/pull/1134我希望他们接受并尽快合并。我添加了一个测试，所以我确信它在任何情况下都可以工作，因为所有来自Jquery UI的可调整大小的测试都适用于这个修改。

我开始使用ylebre代码，但它没有用。所以我做了一些小改动。

Answer 4

最后在试图克服这个令人讨厌的bug之后找到了一个非常有效的解决方案。简单地说，将你的handle元素追加到ui类中。下面的功能已经过测试，适用于南手柄和西手柄。希望有所帮助！

function resizables(element, handle, type){

 var height = handle.height();
 var place = type =="s"? "bottom":"top";
 var css = {};
        css["height"] = height+"px";
        css[place] = -height+"px";


 element.resizable({handles: type});
 var jqclass = element.find(".ui-resizable-"+type);

        handle.css({"cursor": type+"-resize"});
        jqclass.append(handle); 
        jqclass.css(css);
}

当您调用下面的函数时，您的自定义句柄将放置在正确的位置，并可能正常工作。 PS：该功能适用于＆＃39; n＆＃39;并且＆＃39; s＆＃39;处理

resizables($("#draggable"), $("#handle"), 's');

Answer 5

在2020年，这个简单的解决方案有效。.

$('.your-class').each(function (index) {
        $(this).resizable({
            handles: { e: $(this).find('.child-div .handle-resize-class') },

Answer 6

我遇到了类似的问题但我需要将hadlers动态设置为多个元素：

            $.each($(".imagecontainer"),function() {
                $(this).resizable({
                    handles: {se: $(this).closest(".spaciator").find(".ui-resizable-se")}
                });
            };

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

6 个答案: