JQuery UI 中的自定义可调整大小的句柄 [英] Custom Resizable Handles in JQuery UI

问题描述

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

关于 Resizable 方法(特别是 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;">

<script type="text/javascript">$(函数(){var codeTextBox = $("#<%= codeTextBox.ClientID %>");codeTextBox.resizable({句柄:{ s : $(".resizable-s") },最小高度:80，最大高度:400});});

当然，我不能让可调整大小的句柄 div(class resizable-s)成为 TextBox/textarea 的子级，但根据 JQuery 文档，这应该不是问题.

从我所做的搜索来看，我不是唯一遇到这个问题的人.(不幸的是，JQuery 文档没有给出使用自定义可调整大小的句柄的例子，所以我们都不确定正确的代码.)如果有人可以提出修复这个问题，或者确实确认这是一个 JQuery 错误，非常感谢.

解决方案

从我在 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 的一部分，可能应该使用整个函数):

<代码> ...//初始化鼠标交互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></code></pre><p>和 javascript 代码:</p><pre><code> $("#resizable").resizable({句柄:{s:document.getElementById("south")}});</code></pre><p>希望这有帮助！</p><p>I've been attempting to create a resizable textbox (ASP.NET multiline <code>TextBox</code> / HTML <code>textarea</code>) and use JQuery UI to make it resizable, but seem to be running into a few issues involving custom drag handles.</p>

<p>The JQuery documentation on the <a href="http://docs.jquery.com/UI/API/1.7.2/Resizable" rel="noreferrer"><code>Resizable</code></a> method (specifically that on the <a href="http://docs.jquery.com/UI/API/1.7.2/Resizable#option-handles" rel="noreferrer"><code>handles</code></a> 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 <code>div</code> 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).</p>

<p>Here is my markup (ASP.NET/XHTML) and JavaScript code:</p><pre><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>
</code></pre><p>Of course, I can't make the resizable handle div (class <code>resizable-s</code>) a child of the <code>TextBox</code>/<code>textarea</code>, but this should not be a problem according to the JQuery docs.</p>

<p>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.</p><div class="h2_lin"> 解决方案 </div><p>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. </p>

<p>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.</p>

<p>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.</p>

<p>Around line 140 in ui.resizable.js I changed:</p><pre><code>this._handles = $('.ui-resizable-handle', this.element)
    .disableSelection();
</code></pre><p>to</p><pre><code>this._handles = $('.ui-resizable-handle')
    .disableSelection();
</code></pre><p>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:</p><pre><code>   ...
   //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);
      });
   }
</code></pre><p>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:</p><pre><code><textarea id="resizable" class="ui-widget-content">
    <h3 class="ui-widget-header">Resizable</h3>
</textarea>
<div id="south" class="ui-resizable-handle">south</div>
</code></pre><p>And the javascript code:</p><pre><code>    $("#resizable").resizable(
        {handles: {s: document.getElementById("south")}}
    );
</code></pre><p>Hope this helps!</p>

                        <p>这篇关于JQuery UI 中的自定义可调整大小的句柄的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！</p>
                        
                    </div>
                    <div class="arc-body-main-more">
                        <span onclick="unlockarc('2682305');">查看全文</span>
                    </div>
                </div>
				<div>
                            
                        </div>
                <div class="wwads-cn wwads-horizontal" data-id="166" style="max-width:100%;border: 4px solid #666;"></div>
            </div>
        </article>
        <div id="arc-ad-2" class="mb-1">
            <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5038752844014834"
     crossorigin="anonymous"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-5038752844014834"
     data-ad-slot="3921941283"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

        </div>
        <div class="widget bgwhite radius-1 mb-1 shadow widget-rel">
            <h5>相关文章</h5>
            <ul>
                    <li>
                        <a target="_blank" title="JQuery UI中的自定义可调整大小的句柄" href="/862536.html">
                            JQuery UI中的自定义可调整大小的句柄;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="jQuery UI可调整大小的自定义句柄错误" href="/1485698.html">
                            jQuery UI可调整大小的自定义句柄错误;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="从jquery UI可调整大小的元素中删除句柄图像" href="/1020103.html">
                            从jquery UI可调整大小的元素中删除句柄图像;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="可调整大小的jQueryUI句柄" href="/1015740.html">
                            可调整大小的jQueryUI句柄;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="jQuery UI可调整大小的快照" href="/1491932.html">
                            jQuery UI可调整大小的快照;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="jQuery ui可调整大小，返回大小" href="/1494335.html">
                            jQuery ui可调整大小，返回大小;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="jQuery可调整大小的插件:使用哪个句柄?" href="/1497480.html">
                            jQuery可调整大小的插件:使用哪个句柄?;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="jQuery可调整大小的句柄里面的孩子" href="/1107484.html">
                            jQuery可调整大小的句柄里面的孩子;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="在CKEditor中可调整大小的jQuery UI" href="/1868809.html">
                            在CKEditor中可调整大小的jQuery UI;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="jQuery UI可调整大小：重影问题" href="/1020822.html">
                            jQuery UI可调整大小：重影问题;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="jQuery UI可调整大小-操作方向" href="/1811967.html">
                            jQuery UI可调整大小-操作方向;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="jQuery UI可调整大小:单独使用向东句柄时的自动高度" href="/1484871.html">
                            jQuery UI可调整大小:单独使用向东句柄时的自动高度;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="自定义**可调整大小** Windows窗体主题" href="/1216498.html">
                            自定义**可调整大小** Windows窗体主题;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="如何为可调整大小的jQuery UI元素启动调整大小的功能（触发句柄拖动）" href="/690862.html">
                            如何为可调整大小的jQuery UI元素启动调整大小的功能（触发句柄拖动）;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="jQuery UI可调整大小 - 如何加厚手柄" href="/575562.html">
                            jQuery UI可调整大小 - 如何加厚手柄;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="如何制作自定义绘制可调整大小的容器？" href="/498218.html">
                            如何制作自定义绘制可调整大小的容器？;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="自定义“可调整大小的图像”在iOS中绘图" href="/926161.html">
                            自定义“可调整大小的图像”在iOS中绘图;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="jquery ui可调整大小的左下手柄来调整大小" href="/1015515.html">
                            jquery ui可调整大小的左下手柄来调整大小;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="jQuery UI可调整大小的防火窗口调整大小事件" href="/1011630.html">
                            jQuery UI可调整大小的防火窗口调整大小事件;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="jQuery-UI可调整大小，以编程方式调整大小" href="/1501202.html">
                            jQuery-UI可调整大小，以编程方式调整大小;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="jQuery可调整大小的句柄设置程序不起作用" href="/1485460.html">
                            jQuery可调整大小的句柄设置程序不起作用;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="jQuery可调整大小的.Live()" href="/1496636.html">
                            jQuery可调整大小的.Live();
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="jQuery UI调整大小自定义句柄，而不是调整大小元素的子元素" href="/1500924.html">
                            jQuery UI调整大小自定义句柄，而不是调整大小元素的子元素;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="Jquery UI可调整大小 - 调整大小放置在iframe上的div" href="/571069.html">
                            Jquery UI可调整大小 - 调整大小放置在iframe上的div;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="可调整大小的jQuery UI最小宽度过大" href="/1501137.html">
                            可调整大小的jQuery UI最小宽度过大;
                        </a>
                    </li>
            </ul>
        </div>
        <div class="mb-1">
            <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5038752844014834"
     crossorigin="anonymous"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-5038752844014834"
     data-ad-slot="3921941283"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

        </div>
    </div>
    <div class="side">
        <div class="widget widget-side bgwhite mb-1 shadow">
            <h5>前端开发最新文章</h5>
            <ul>
                    <li>
                        <a target="_blank" title="为什么Chrome（在Electron内部）突然重定向到chrome-error：// chromewebdata？" href="/1996151.html">
                            为什么Chrome（在Electron内部）突然重定向到chrome-error：// chromewebdata？;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="错误102（net :: ERR_CONNECTION_REFUSED）：服务器拒绝连接" href="/749568.html">
                            错误102（net :: ERR_CONNECTION_REFUSED）：服务器拒绝连接;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="如何解决'重定向已被CORS策略阻止：没有'Access-Control-Allow-Origin'标题'？" href="/1009885.html">
                            如何解决'重定向已被CORS策略阻止：没有'Access-Control-Allow-Origin'标题'？;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="如何处理“Uncaught（in promise）DOMException：play（）失败，因为用户没有首先与文档交互。”在桌面上使用Chrome 66？" href="/884909.html">
                            如何处理“Uncaught（in promise）DOMException：play（）失败，因为用户没有首先与文档交互。”在桌面上使用Chrome 66？;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="警告：添加非被动事件侦听器到滚动阻塞'touchstart'事件" href="/818517.html">
                            警告：添加非被动事件侦听器到滚动阻塞'touchstart'事件;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="如何在浏览器中播放.TS文件（视频/ MP2T媒体类型）？" href="/343346.html">
                            如何在浏览器中播放.TS文件（视频/ MP2T媒体类型）？;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="此请求已被阻止;内容必须通过HTTPS提供" href="/886417.html">
                            此请求已被阻止;内容必须通过HTTPS提供;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="资源解释为样式表，但转换为MIME类型text / html（似乎与web服务器无关）" href="/562873.html">
                            资源解释为样式表，但转换为MIME类型text / html（似乎与web服务器无关）;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="通过HTTPS加载页面但请求不安全的XMLHttpRequest端点" href="/885901.html">
                            通过HTTPS加载页面但请求不安全的XMLHttpRequest端点;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="拒绝从执行脚本'*'，因为它的MIME类型（“应用/ JSON'）不是可执行文件，并严格MIME类型检查被启用。" href="/47347.html">
                            拒绝从执行脚本'*'，因为它的MIME类型（“应用/ JSON'）不是可执行文件，并严格MIME类型检查被启用。;
                        </a>
                    </li>
            </ul>
        </div>
        <div class="widget widget-side bgwhite mb-1 shadow">
            <h5>
                热门教程
            </h5>
            <ul>
                <li>
                    <a target="_blank" title="Java教程" href="/OnLineTutorial/java/index.html">
                        Java教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Apache ANT 教程" href="/OnLineTutorial/ant/index.html">
                        Apache ANT 教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Kali Linux教程" href="/OnLineTutorial/kali_linux/index.html">
                        Kali Linux教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="JavaScript教程" href="/OnLineTutorial/javascript/index.html">
                        JavaScript教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="JavaFx教程" href="/OnLineTutorial/javafx/index.html">
                        JavaFx教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="MFC 教程" href="/OnLineTutorial/mfc/index.html">
                        MFC 教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Apache HTTP客户端教程" href="/OnLineTutorial/apache_httpclient/index.html">
                        Apache HTTP客户端教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Microsoft Visio 教程" href="/OnLineTutorial/microsoft_visio/index.html">
                        Microsoft Visio 教程
                    </a>
                </li>
            </ul>
        </div>
        <div class="widget widget-side bgwhite mb-1 shadow">
            <h5>
                热门工具
            </h5>
            <ul>
                
                <li>
                    <a target="_blank" title="Java 在线工具" href="/Onlinetools/details/4">
                        Java 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="C(GCC) 在线工具" href="/Onlinetools/details/6">
                        C(GCC) 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="PHP 在线工具" href="/Onlinetools/details/8">
                        PHP 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="C# 在线工具" href="/Onlinetools/details/1">
                        C# 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Python 在线工具" href="/Onlinetools/details/5">
                        Python 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="MySQL 在线工具" href="/Onlinetools/Dbdetails/33">
                        MySQL 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="VB.NET 在线工具" href="/Onlinetools/details/2">
                        VB.NET 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Lua 在线工具" href="/Onlinetools/details/14">
                        Lua 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Oracle 在线工具" href="/Onlinetools/Dbdetails/35">
                        Oracle 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="C++(GCC) 在线工具" href="/Onlinetools/details/7">
                        C++(GCC) 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Go 在线工具" href="/Onlinetools/details/20">
                        Go 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Fortran 在线工具" href="/Onlinetools/details/45">
                        Fortran 在线工具
                    </a>
                </li>
            </ul>
        </div>
        
    </div>
</div>
<script type="text/javascript">var eskeys = 'jquery,ui,中,的,自定义,可调整,大小,的,句柄'; var cat = 'cc';';//qianduan</script>
    </div>
<div id="pop" onclick="pophide();">
    <div id="pop_body" onclick="event.stopPropagation();">
        <h6 class="flex flex101">
            登录
            <span onclick="pophide();">关闭</span>
        </h6>
        <div class="pd-1">
            <div class="wxtip center">
                <span>扫码关注<em>1秒</em>登录</span>
            </div>
            <div class="center">
                <img id="qr" src="https://huajiakeji.com/Content/Images/qrydx.jpg" alt="" style="width:150px;height:150px;" />
            </div>
            <div style="margin-top:10px;display:flex;justify-content: center;">
                <input type="text" placeholder="输入验证码" id="txtcode" autocomplete="off" />
                <input id="btngo" type="button" onclick="chk()" value="GO" />
            </div>
            <div class="center" style="margin: 4px; font-size: .8rem; color: #f60;">
                发送“验证码”获取
                <em style="padding: 0 .5rem;">|</em>
                <span style="color: #01a05c;">15天全站免登陆</span>
            </div>
            <div id="chkinfo" class="tip"></div>
        </div>
    </div>
</div>    <script type="text/javascript" src="https://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/highlight.min.js"></script>
<script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/base.js?v=0.22"></script>
<script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/tui.js?v=0.11"></script>
<footer class="footer">
    <div class="container">
		<div class="flink mb-1">
			友情链接：
            <a href="https://www.it1352.com/" target="_blank">IT屋</a>
            <a href="https://huajiakeji.com/" target="_blank">Chrome插件</a>
            <a href="https://www.cnplugins.com/" target="_blank">谷歌浏览器插件</a>
        </div>
        <section class="copyright-section">
            <a href="https://www.it1352.com" title="IT屋-程序员软件开发技术分享社区">IT屋</a>
            ©2016-2022 <a href="http://www.beian.miit.gov.cn/" target="_blank">琼ICP备2021000895号-1</a>
            <a href="/sitemap.html" target="_blank" title="站点地图">站点地图</a>
            <a href="/Home/Tags" target="_blank" title="站点标签">站点标签</a>
            <a target="_blank" alt="sitemap" href="/sitemap.xml">SiteMap</a>
            <a href="/1155981.html" title="IT屋-免责申明"><免责申明></a>
            本站内容来源互联网,如果侵犯您的权益请联系我们删除.
        </section>
        
<!--统计代码-->
<script type="text/javascript">
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?0c3a090f7b3c4ad458ac1296cb5cc779";
      var s = document.getElementsByTagName("script")[0]; 
      s.parentNode.insertBefore(hm, s);
    })();
</script>
<script type="text/javascript">
    (function () {
        var bp = document.createElement('script');
        var curProtocol = window.location.protocol.split(':')[0];
        if (curProtocol === 'https') {
            bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
        }
        else {
            bp.src = 'http://push.zhanzhang.baidu.com/push.js';
        }
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(bp, s);
    })();
</script>
    </div>
</footer>
</body>
</html>