17

サイズ変更可能なテキスト ボックス (ASP.NET multiline TextBox/ HTML textarea) を作成し、JQuery UI を使用してサイズ変更可能にしようとしましたが、カスタム ドラッグ ハンドルに関するいくつかの問題が発生しているようです。

メソッドに関する JQuery ドキュメント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;">
</div>

<script type="text/javascript">

    $(function() {
        var codeTextBox = $("#<%= codeTextBox.ClientID %>");

        codeTextBox.resizable({
            handles: { s : $(".resizable-s") },
            minHeight: 80,
            maxHeight: 400
        });
    });

</script>

もちろん、サイズ変更可能なハンドル div (クラス) を/resizable-sの子にすることはできませんが、JQuery ドキュメントによると、これは問題にはなりません。TextBoxtextarea

私が行った検索から判断すると、この問題を抱えているのは私だけではありません。(残念ながら、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.core.js の mouseInit の一部、おそらく関数全体を使用する必要があります) を ui.resizable.js (180 行目あたり) に追加しました。

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

このjQueryUIのバグ は関連している可能性があります。

私が試した他のこと：

  • 'latest'を'1.6'に、'jquery-1.3.2'を'jquery-1.2.6'に置き換えて、古いバージョンのjQuery UIを試して、リグレッションかどうかを確認します。それのようには見えません。
  • にCSSクラスを追加ui-resizable-sまたは/またはui-resizable-handleCSSクラス#southgrip。サイコロはありません。ただし、#southgripが内部#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 に答える
-1

同様の問題がありましたが、ハドラーを複数の要素に動的に設定する必要がありました。

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