如何重置 JQueryUI Resizable 元素？

Question

我正在使用 JqueryUI 创建可拖动和可调整大小的元素以生成 html 页面。当我保存 html 内容时，所有类和样式都保存在我的 html 页面中（例如 ui-wrapper 和 ui-resizable-handle ).

当我加载 html 页面时，我想初始化图像的可调整大小。但是这个 img 标签周围已经有 ui-wrapper parent 和 ui-handles，我不能使用 resizable 事件。如果我在图像上重新初始化 resizable()，它会生成另一个包装器和句柄。

我的代码示例： https://jsfiddle.net/Alex197/6ebn4jsa/7/

$(document).ready(function(){
 $('.img').each(function(){
   $(this).resizable();
  });
});

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>


<div class="ui-wrapper ui-draggable ui-draggable-handle" style="overflow: hidden; position: absolute; width: 450px; height: 300px; top: 10px; left: 10px; margin: 0px; z-index: 10;">
   <img id="f93wmxm" src="https://via.placeholder.com/150" class="img context-menu-one" style="margin: 0px; resize: none; position: static; zoom: 1; display: block; height: 300px; width: 450px;">
   <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div>
   <div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div>
   <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div>
</div>

如何在没有重复包装器和句柄的情况下在我的图像上重新初始化可调整大小的事件？

Answer 1

使用
$(this).resizable("destroy");

如何重置 JQueryUI Resizable 元素？

How to reset JQueryUI Resizable element?

html

javascript

jquery

jquery-ui