17

我一直在尝试创建一个可调整大小的文本框（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 错误，那将不胜感激。

4

6 回答 6

24

通过我在 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 代码片段：

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

希望这可以帮助！

于 2009-06-10T08:16:18.057 回答
3

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

<!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>

这个 jQuery UI 错误 可能是相关的。

我尝试过的其他事情：

  • 将“latest”替换为“1.6”，将“jquery-1.3.2”替换为“jquery-1.2.6”，以尝试使用旧版本的 jQuery UI 来查看它是否是回归。看起来不像。
  • 将ui-resizable-s和/或ui-resizable-handleCSS 类添加到#southgrip. 没有骰子。但是，如果#southgrip是 inside #resizable，它可以工作。但是，这并不能解决您的问题。
  • 用于选项{ 's': $('#southgrip').get(0) }。handles没有骰子。
于 2009-06-10T07:33:04.510 回答
1

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

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

于 2013-11-13T14:16:12.593 回答
0

经过数小时试图克服这个烦人的错误后，终于找到了一个非常有效的解决方案。只需将句柄元素附加到 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：该函数适用于“n”和“s”句柄。

resizables($("#draggable"), $("#handle"), 's');
于 2014-10-29T14:36:41.120 回答
0

在 2020 年，这个简单的解决方案奏效了。

$('.your-class').each(function (index) {
        $(this).resizable({
            handles: { e: $(this).find('.child-div .handle-resize-class') },
于 2020-08-04T07:36:23.710 回答
-1

我有一个类似的问题，但我需要将 hadlers 动态设置为多个元素：

            $.each($(".imagecontainer"),function() {
                $(this).resizable({
                    handles: {se: $(this).closest(".spaciator").find(".ui-resizable-se")}
                });
            };
于 2015-08-17T16:02:56.340 回答