...//初始化鼠标交互this._mouseInit();//也为手柄添加鼠标事件 - ylebrefor (i in this.handles) {$(this.handles[i]).bind('mousedown.resizable', function(event) {返回 self._mouseDown(event);});}这允许我制作一个不是可调整大小元素的子元素的调整大小句柄.我的句柄是一个 id 为 'south' 的 div,并附加到可调整大小的元素.这是 HTML 代码段:<h3 class="ui-widget-header">可调整大小</h3></textarea><div id="south" class="ui-resizable-handle">south</div>和 javascript 代码: $("#resizable").resizable({句柄:{s:document.getElementById("south")}});希望这有帮助!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.The JQuery documentation on the Resizable method (specifically that on the handles option) 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 div handle 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).Here is my markup (ASP.NET/XHTML) and JavaScript code:<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.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. 解决方案 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.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.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.Around line 140 in ui.resizable.js I changed:this._handles = $('.ui-resizable-handle', this.element) .disableSelection();tothis._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: ... //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:<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: $("#resizable").resizable( {handles: {s: document.getElementById("south")}} );Hope this helps! 这篇关于JQuery UI 中的自定义可调整大小的句柄的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持! 上岸,阿里云!