jQuery UI 可调整大小的手柄命中区域/灵敏度/容差。

Question

我正在使用jQuery UI Resizable，但我（个人认为）调整元素大小时，这就像是玩一个视频游戏，要精确击中可调整的区域。

似乎可调整的区域只有div边缘上的一个像素！太过分了...

请问是否有人知道如何增加把手的可调整区域/容差，这样您就不必像外科医生一样移动鼠标才能抓住div边缘呢？

- Kirk Ross

Answer 1

可调整大小的手柄具有类ui-resizable-handle。您可以根据自己的方便和选择样式化这些类。您可以增加它们的大小、尺寸、形状等。例如：

.ui-resizable-handle{width:0;height:0;border:4px solid blue;border-radius:10px;}

在这种情况下，您将拥有可调整大小的圆形手柄，颜色为蓝色，而且相当大。

.ui-resizable-handle{width:0;height:0;border:4px solid blue;}

在这种情况下，手柄会呈矩形形状。因此，您可以使用CSS对这些手柄进行任何想要的操作。

演示： http://jsfiddle.net/lotusgodkk/GCu2D/92/

- K K

---

我已经解决了大小问题，但是我需要在使用滚动条时防止句柄移动。请参考这个fiddle http://jsfiddle.net/kirkbross/Vcz4h/3/ - Kirk Ross

将bottom:0添加到处理程序中，使其固定在底部。 - K K

Answer 2

您可以这样将jquery引用传递给句柄：

$('#elementResizable').resizable({
    handles: {
        'n': '#ngrip',
        'e': '#egrip',
        's': '#sgrip',
        'w': '#wgrip'
    }
});

我找到的演示

（涉及IT技术）

- terpinmd

---

如何在使用滚动条时停止句柄移动？Fiddle：http://jsfiddle.net/kirkbross/Vcz4h/3/ - Kirk Ross