jqueryでdivなどをdragしている最中にdrag対象の文字を変えてしまうとresize出来なくなってしまう


jqueryでdragしている間そのdivの内容の文字をtext()で変更すると  
resizeが出来なくなってしまうのです。

詳しくはsnipetで実行してみてください。

jqueryのtext()の代わりに.get(0).innerTextに変更しても同じ現象が発生します。  
text()の代わりにhtml()にしても同じ現象が発生します。

変更した後にもう一度draggable()を宣言してもdraggableになりません。

皆さんはどのように解決していますか?

[code]

    (($) => {
      $('.resizable').resizable();
      $('.resizable').draggable({
        drag: (e, ui) => {
          ui.helper.html(`x:${ui.helper.position().left}, y:${ui.helper.position().top}`);
        }
      });
    })(jQuery);
[/code]

[code]

    .resizable {
      border: solid 1px black;
    }
[/code]

[code]

    <link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
    <div class="resizable">
      hello
    </div>
[/code]




解決方法がわかりましたので共有します。

jquery uiのdraggable,
resizableは、対象のdivの中に複数のdivを自動的に実装されているので、text()などで上書きしてしまうと必要なdraggable,
resizableのdivも消してしまうので、resizableが出来なくなってしまうようです。

それを解決するために、draggable, resizableを指定したdivの中に文字表示用のdivを別途追加して、その中を更新するようにします。

jquery uiは自動でdivを追加するので、:firstのみを更新するようにします。

詳しい内容はsnipetで確認できます。

ありがとうございました。

[code]

    (($) => {
      $('.resizable').resizable();
      $('.resizable').draggable({
        drag: (e, ui) => {
          // ui.helperには対象のdivが入るので、その中の1番目の(:first)のchildrenのdivを指定します。
          ui.helper.children('div:first').text(`x:${ui.helper.position().left}, y:${ui.helper.position().top}`);
        }
      });
    })(jQuery);
[/code]

[code]

    .resizable {
      border: solid 1px black;
    }
[/code]

[code]

    <link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
    </div><div class="resizable">
      <div>　<!-- 文字表示用のdivを追加 -->
        hello
      </div>
    </div>
[/code]

