1

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

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

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

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

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

(($) => {
  $('.resizable').resizable();
  $('.resizable').draggable({
    drag: (e, ui) => {
      ui.helper.html(`x:${ui.helper.position().left}, y:${ui.helper.position().top}`);
    }
  });
})(jQuery);
.resizable {
  border: solid 1px black;
}
<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>

1 件の回答 1

2

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

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

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

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

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

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

(($) => {
  $('.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);
.resizable {
  border: solid 1px black;
}
<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>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。