我遇到一个问题,我想使用自定义手柄调整div的大小。
handles: {
'nw': '.tl',
'ne': '.tr',
'sw': '.bl',
'se': '.br',
'e': '.r',
'w': '.l'
}
所以我为每个方向设置了班级。但是,当我执行nw,w和sw时,它们不能从左侧调整大小,实际上它们的作用就像是新的e和se一样。这是一个实时代码,可以了解更多。
请考虑以下示例:
https://jsfiddle.net/Twisty/cdLn56f1/
HTML
<div id="vidsub" style="position: relative; width: 417px; height: 53px; margin: 10px;background: red; z-index: 100;">
sdsds
<div class="l ui-resizable-handle ui-resizable-w resizable-wrapper" id="w"></div>
<div class="r ui-resizable-handle ui-resizable-e resizable-wrapper" id="e"></div>
<div class="tl ui-resizable-handle ui-resizable-nw" id="nw"></div>
<div class="tr ui-resizable-handle ui-resizable-ne" id="ne"></div>
<div class="bl ui-resizable-handle ui-resizable-sw" id="sw"></div>
<div class="br ui-resizable-handle ui-resizable-se" id="se"></div>
</div>
CSS
.ui-resizable-handle {
position: absolute;
width: 12px;
height: 12px;
background: rgb(255, 0, 106);
border-width: 1.5px;
border-style: solid;
border-color: rgb(255, 255, 255);
border-image: initial;
border-radius: 999px;
}
.resizable-wrapper {
width: 8px;
height: 16px;
}
.l {
left: -4px;
top: calc(50% - 10px);
}
.r {
right: -4px;
top: calc(50% - 10px);
}
.tl {
left: -6px;
top: -6px;
}
.tr {
right: -6px;
top: -6px;
}
.bl {
left: -6px;
bottom: -6px;
}
.br {
right: -6px;
bottom: -6px;
}
JavaScript
$(function() {
$('#vidsub').resizable({
handles: {
'nw': '.tl',
'ne': '.tr',
'sw': '.bl',
'se': '.br',
'e': '.r',
'w': '.l'
}
});
});
请查看文档:
注意:在生成自己的句柄时,每个句柄必须具有
ui-resizable-handle
类以及相应的ui-resizable-{direction}
类,例如ui-resizable-s
。
因此,您必须调整班级以适应手柄的需求。这将处理很多游标和CSS。另外您的小提琴未正确设置,对此进行了更正。