在 jQuery 调整大小中更改特定元素调整大小选项

Question

我正在使用 jQueryUI 可调整大小的小部件，并且在页面上有一堆可调整大小的框。当文档加载时，我初始化小部件，如下所示：

$('.ui-draggable').resizable({
    minHeight: 10, // 10 is actually the default
    minWidth: 10, // 10 is actually the default
    resize: function() {
        showProperties(this);
    },
});

但是，在某些时候，我只希望其中一些元素可以更改调整大小选项。我想做的是：

if (type == 'sometype')
{
    console.log($('#'+elementID).resizable('option', 'handles'));
    $('#'+elementID).resizable('option', 'handles', 'e,w');
    console.log($('#'+elementID).resizable('option', 'handles'));
}

这确实输出：

e,s,se
e,w

在控制台中，因此事件被触发并且选择器是正确的，但代码实际上并没有工作：实际上，句柄保持不变，即e，s，se。

这是因为我使用了与原始 init 不同的选择器吗？如果是这样，我如何才能仅在最初可调整大小的元素的子集上更改调整大小选项？如果不是，可能是什么问题？

Answer 1

Handles 实际上是添加到应用了 resizable 的元素的 div。似乎更改选项不会刷新这些句柄。也许有一种方法可以将更改应用于特定子集并刷新，但我不确定如何。但一种快速的解决方法是隐藏您不需要的句柄，而不是更改 handle 选项。您必须为所有需要的句柄设置 handle 选项，然后隐藏不需要的句柄。像这样删除 se handle 例如：

$('#'+elementID).find('.ui-resizable-se').hide();

在 jQuery 调整大小中更改特定元素调整大小选项

Change Specific Element Resize Options in jQuery Resize

jquery-ui

jquery-ui-resizable