JQuery UI 中的自定义可调整大小的句柄
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/958419/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Custom Resizable Handles in JQuery UI
提问by Noldorin
I've been attempting to create a resizable textbox (ASP.NET multiline TextBox/ HTML textarea) and use JQuery UI to make it resizable, but seem to be running into a few issues involving custom drag handles.
我一直在尝试创建一个可调整大小的文本框（ASP.NET 多行TextBox/ HTML textarea）并使用 JQuery UI 使其可调整大小，但似乎遇到了一些涉及自定义拖动手柄的问题。
The JQuery documentation on the Resizablemethod (specifically that on the handlesoption) suggests that I can set any of the handles to use a custom HTML element. I have managed to get the resizable textbox working perfectly well using the default resizable handles, but trying to set custom ones (i.e. an HTML element that I have defined in markup) creates the following issue: the resizable container leaves the correct amount of space for the divhandle at the bottom (for the South handle), yet leaves the space empty and shows the element below (outside of) the resizable container (verified using Firebug).
关于该Resizable方法的 JQuery 文档（特别是关于该handles选项的文档）建议我可以设置任何句柄以使用自定义 HTML 元素。我已经设法使用默认的可调整大小的句柄使可调整大小的文本框工作得很好，但是尝试设置自定义的（即我在标记中定义的 HTML 元素）会产生以下问题：可调整大小的容器为div底部的手柄（用于南手柄），但将空间留空并显示可调整大小的容器下方（外部）的元素（使用 Firebug 验证）。
Here is my markup (ASP.NET/XHTML) and JavaScript code:
这是我的标记 (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>
Of course, I can't make the resizable handle div (class resizable-s) a child of the TextBox/textarea, but this should not be a problem according to the JQuery docs.
当然，我不能使可调整大小的句柄 div (class resizable-s) 成为TextBox/的子项textarea，但根据 JQuery 文档，这应该不是问题。
Judging by the searching I've done, I'm not the only person who's had this problem. (Unfortunately, the JQuery docs fail to give an example of using custom resizable handles, so we're all left unsure of precisely the right code.) If anyone could suggest a fix to this, or indeed confirmation that it is a JQuery bug, that would be very much appreciated.
从我所做的搜索来看，我不是唯一遇到这个问题的人。（不幸的是，JQuery 文档没有给出一个使用自定义可调整大小的句柄的例子，所以我们都不确定正确的代码。）如果有人可以提出修复这个问题，或者确实确认这是一个 JQuery 错误，非常感谢。
回答by ylebre
From a bit of digging I did in the jquery-ui code, I think I can confirm that a custom handle outside the resizable element doesn't work.
通过我在 jquery-ui 代码中所做的一些挖掘，我想我可以确认可调整大小元素之外的自定义句柄不起作用。
The problem is that the mouse events are initialized for the resizable element (or a wrapper element in the case of textarea). If the handle is not a child of where the mouse events are handled, it won't trigger the mousedown event on the handle, thus not making it draggable.
问题是鼠标事件是为可调整大小的元素（或在 textarea 的情况下的包装元素）初始化的。如果句柄不是鼠标事件处理位置的子级，则不会触发句柄上的 mousedown 事件，因此不会使其可拖动。
As a proof of concept I patched around a bit in jquery-ui until I got things to (sort of) work. No guarantees about the code, but it should point out what kind of changes would need to happen to make it work.
作为概念证明，我在 jquery-ui 中进行了一些修补，直到我开始（某种）工作。不保证代码，但它应该指出需要进行什么样的更改才能使其工作。
Around line 140 in ui.resizable.js I changed:
在 ui.resizable.js 的第 140 行左右我改变了：
this._handles = $('.ui-resizable-handle', this.element)
.disableSelection();
to
到
this._handles = $('.ui-resizable-handle')
.disableSelection();
Then I added the following code (part of mouseInit from ui.core.js, probably should use the whole function) in ui.resizable.js (around line 180) after the mouseInit is called for the resizable element:
然后，在为可调整大小的元素调用 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);
});
}
This allows me to make a resize handle that is not a child of the resizable element. My handle is a div with id 'south' and is attached to the resizable element. Here is the HTML snippit:
这允许我制作一个不是可调整大小元素的子元素的调整大小句柄。我的句柄是一个 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>
And the javascript code:
和 javascript 代码：
$("#resizable").resizable(
{handles: {s: document.getElementById("south")}}
);
Hope this helps!
希望这可以帮助！
回答by Roman Nurik
Yeah, looks like a bug to me. Here's a complete sample, for those trying locally:
是的，对我来说看起来像一个错误。这是一个完整的示例，供在本地尝试的人使用：
<!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 bugmaybe related.
这个 jQuery UI 错误可能与此有关。
Other things I tried:
我尝试过的其他事情：
- Replace 'latest' with '1.6' and 'jquery-1.3.2' with 'jquery-1.2.6' to try with an older version of jQuery UI to see if it's a regression. Doesn't look like it.
- Add
ui-resizable-sand/orui-resizable-handleCSS classes to#southgrip. No dice. However, if#southgripis inside#resizable, it works. But, this doesn't solve your problem. - Using
{ 's': $('#southgrip').get(0) }for thehandlesoption. No dice.
- 将 'latest' 替换为 '1.6' 并将 'jquery-1.3.2' 替换为 'jquery-1.2.6' 以尝试使用旧版本的 jQuery UI 以查看它是否是回归。看起来不像
- 添加
ui-resizable-s和/或ui-resizable-handleCSS 类到#southgrip. 没有骰子。但是，如果#southgrip在里面#resizable，它就可以工作。但是，这并不能解决您的问题。 - 使用
{ 's': $('#southgrip').get(0) }该handles选项。没有骰子。
回答by ccsakuweb
I had the same problem 4 years after. It sames they never fixed that. I though to use Interface but it did not have any updates since 2007. So I decided to fix the bug by myself and make a request pull in the jQuery UI project in Github. https://github.com/jquery/jquery-ui/pull/1134I hope they accept it and merge it soon. I added a test so I'm sure it will work in any case because all the tests of resizable from Jquery UI works with this modification.
4 年后我遇到了同样的问题。他们从来没有解决过这个问题。我虽然使用 Interface 但它自 2007 年以来没有任何更新。所以我决定自己修复这个错误，并在 Github 的 jQuery UI 项目中提出请求。https://github.com/jquery/jquery-ui/pull/1134我希望他们接受并尽快合并。我添加了一个测试，所以我确信它在任何情况下都可以工作，因为所有来自 Jquery UI 的可调整大小的测试都适用于这个修改。
I started using ylebre code but it did not work. So I made some little changes.
我开始使用 ylebre 代码，但没有用。所以我做了一些小改动。
回答by Kareem
Finally found an extremely effective solution after hours of trying to get over this annoying bug. Simply, append your handle element in the ui class. The function below has been tested and works fine with South and West handles. Hope that helps!
经过数小时的努力克服这个烦人的错误，终于找到了一个非常有效的解决方案。简单地，在 ui 类中附加您的句柄元素。下面的功能已经过测试，适用于 South 和 West 手柄。希望有帮助！
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);
}
When you call the function like below, your custom handle will be placed in the right location and will work probably. PS: the function works with 'n' and 's' handles.
当您像下面这样调用函数时，您的自定义句柄将被放置在正确的位置并且可能会起作用。PS：该函数适用于“n”和“s”句柄。
resizables($("#draggable"), $("#handle"), 's');
回答by David Alcalá álvarez
I had a similar issue but my need was to set the hadlers dynamically to multiple elements:
我有一个类似的问题，但我需要将 hadler 动态设置为多个元素：
$.each($(".imagecontainer"),function() {
$(this).resizable({
handles: {se: $(this).closest(".spaciator").find(".ui-resizable-se")}
});
};
