jquery-ui-resizable 相关问题

jQuery UI Resizable插件使所选元素可调整大小（意味着它们具有可拖动的调整大小句柄）。

Javascript 报表设计器带包含可以在设计器中更改的绝对定位字段。 html: Javascript 报表设计器带包含可以在设计器中更改的绝对定位字段。 html: <div class='designer-panel-body' style='height:100px'> <div class='designer-label' style='top:10px'> Field1 </div> <div class='designer-label' style='top:60px; left:20px'> Field2 </div> </div> CSS： .designer-panel-body { border: solid 1px; } .designer-label { position: absolute } Javascript： $(".designer-panel-body").resizable({ start: function(event, ui) { $(this).resizable("option", "minHeight", 80) }, handles: "s" }); 小提琴：https://jsfiddle.net/xk98f2rq/ 带高度也可以通过鼠标改变。如何设置最小高度以使带区高度不能短于最后一个字段顶部位置？示例中的代码为此使用硬编码值 80。如果字段在运行时发生更改，例如删除 Field2，则该值较小，以便面板可以调整大小到 Field1 的顶部。 start方法如何计算minHeight？是否合理/如何重构此代码，以便它使用纯 javascript，而不使用 jquery 和 jquery ui？通过使用 position: absolute 父级 div 不会使其高度适应子级的高度。解决方案是在函数 outerHeight 中计算子项的高度（包括 offset 加 get_height()），并将计算出的高度应用于容器。删除 .designer-label 项目（通过单击它们）时，可调整大小元素的 minHeight 会被调整。 function get_height() { var minHeight = 0; var h; $('.designer-panel-body').find('.designer-label').each(function() { h = $(this).outerHeight(true) + $(this).offset().top; if (h > minHeight) { minHeight = h; } }); return minHeight; } $(".designer-panel-body").height(get_height()); $(".designer-panel-body").resizable({ minHeight: get_height(), handles: "s" }); $('.designer-label').on('click', function() { $(this).remove(); $(".designer-panel-body").resizable("option", "minHeight", get_height()); }); .designer-panel-body { border: solid 1px; position: relative; } .designer-label { position: absolute; border: 1px solid blue; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js"></script> <link href="https://ajax.microsoft.com/ajax/jquery.ui/1.8.7/themes/black-tie/jquery-ui.css" rel="stylesheet" /> <div class='designer-panel-body'> <div class='designer-label' style='top:10px'> Field1 </div> <div class='designer-label' style='top:60px; left:20px'> Field2 </div> </div>

javascript html jquery jquery-ui jquery-ui-resizable

回答 1 投票 0

如何使用 jQuery UI 设置自定义调整大小手柄？

我使用 jQuery UI 来允许调整页面元素的大小，但我想设置自定义句柄。我已经尝试了我认为应该有效的方法，但没有成功。基本的html是：我使用 jQuery UI 来允许调整页面元素的大小，但我想设置自定义句柄。我已经尝试了我认为应该有效的方法，但没有成功。基本的html是： <div id="element_x" class="resizable"> <div id="overlay_x" class="element_buttons"> <div id="resize_element_x" class="resize_element ui-resizable-handle ui-resizable-se"><img src="images/site/handle_resize.png" border=0 title="Resize this element" /></div> </div> </div> 我是这样设置的： var reposition = ''; $(function() { $( ".resizable" ).resizable({ containment: "#viewPage", handles: {"e,s,se" : { e: '.ui-resizable-e', s: '.ui-resizable-s', se: '.ui-resizable-se'}}, resize: function(event, ui){ reposition = ui.position; } }); }); 这会在正确的位置产生正确的手柄，但是当我尝试调整大小时，它什么也没做！可能出了什么问题，或者有更好的方法吗？您的自定义句柄语法错误。这对我有用： var reposition = ''; $(function() { $( ".resizable" ).resizable({ containment: "#viewPage", handles: { 'e': '.ui-resizable-e', 's': '.ui-resizable-s', 'se': '.ui-resizable-se'}, resize: function(event, ui){ reposition = ui.position; } }); }); 解决方案不是我的，但它准确地显示了问题和解决方案是什么： <p><a href="http://bugs.jqueryui.com/ticket/4310">jQuery UI #4310</a> - Custom resizable handles do not work unless the ui-resizable-xy and ui-resizable-handle classes are added.</p> <script src="http://code.jquery.com/jquery-1.8.2.js"></script> <link href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" rel="stylesheet" /> <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script> <div class="container"> <div class="border bottom_right ui-resizable-se ui-resizable-handle"></div> </div> <script> $(function() { $('.container').resizable({ handles: { se: '.bottom_right' } }); }); </script> 对我来说它有效！ :) http://jsfiddle.net/tj_vantoll/pFfKz/ 对我来说，最快的解决方案是更改缩放器样式。示例： $(document).ready(function() { $("#myResizableContainerID").resizable({ handles: "se" }); $(".ui-resizable-se").css({ width: "100%", height: "20px", background: "blue", }); });

html jquery-ui jquery-ui-resizable

回答 3 投票 0

Jquery UI 可旋转不适用于画布上的文本框

我正在使用这个 Image Maker jquery 插件，https://github.com/mattar88/imageMaker，它使用可拖动和调整大小的文本框创建模因和图像。然而，它没有旋转...

jquery user-interface jquery-ui-resizable

回答 0 投票 0

jQuery-ui resizable：元素被拖动时调整大小的问题。

当我拖动一个div，然后调整它的大小，div返回到原来的位置... ... 你能帮我解决这个问题或纠正我的代码中的错误吗？先谢谢你，这是我的代码。...

javascript jquery css jquery-ui jquery-ui-resizable

回答 1 投票 1

如何使用jQuery UI获取可拖动和可调整大小的元素的坐标

我想为响应图像映射生成多个坐标（左，上，宽，高）。在管理界面中，可以在图像上创建，移动和调整大小的矩形。我可以多个...