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>