Как сбросить JQueryUI Resizable элемент?

Question

Я использую JqueryUI для создания перетаскиваемых и изменяемых размеров элементов для создания HTML-страницы.Когда я сохраняю html-контент, все классы и стили сохраняются на моей html-странице (например, ui-wrapper и ui-resizable-handle).

Когда я загружаю html-страницу, я хочуизменение размера init на изображениях.Но вокруг этого тега img уже есть родительский элемент ui-wrapper и дескрипторы пользовательского интерфейса, и я не могу использовать событие 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

use
$ (this) .resizable ("destroy");