Question

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

当我加载html页面时，我想在图像上初始化可调整大小。但是这个img标签周围已经有ui-wrapper父级和ui-handles了，我不能使用可调整大小的事件。如果我在图像上重新启动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可调整大小元素？

1 个答案: