我正在尝试在容器内创建一个可调整大小的滑动条。由于某种原因,可调整大小的方法将div从Position:Relative转换为Position:Absolute。然后,这在视觉上移动了盒子,并破坏了容器容器的滚动动作。
JSFiddle Example
我曾尝试挂接到Stop and Resize事件,然后转换回Position:Relative,但这是一个hack,结果并不完美。看来这应该工作吗?
jQuery的:
$(document).ready(function () {
$(".Timeline").draggable({
axis: "x",
containment: "parent"
})
.resizable({
containment: "parent",
handles: 'e, w'
});
});
HTML:
<div style="width: 800px; overflow: auto;">
<div id="TimelineCanvas">
<div class="TimelineContainer">
<div class="Timeline">
</div>
</div>
</div>
</div>
样式:
#TimelineCanvas
{
width: 2000px;
height: 150px;
}
.TimelineContainer
{
height: 75px;
width: 100%;
border: 1px solid black;
}
.Timeline
{
position: relative;
height: 75px;
width: 75px;
background-color: Gray;
cursor: move;
}
到目前为止,我最好的解决方法是:
$(document).ready(function () {
$(".Timeline").draggable({
axis: "x",
containment: "parent"
})
.resizable({
containment: "parent",
handles: 'e, w',
resize: function (event, ui) {
$(this).css("height", '');
},
stop: function (event, ui) {
$(this).css("position", '');
$(this).css("top", '');
$(this).css("height", '');
}
});
});
任何帮助,将不胜感激;谢谢!
最佳答案
我找不到原始缺陷报告的原因,但是很明显,这是故意的,很可能是特定于浏览器的……肮脏的解决方案可能是您最好的选择。
https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.resizable.js#L242
// bugfix for http://dev.jquery.com/ticket/1749
if (el.is('.ui-draggable') || (/absolute/).test(el.css('position'))) {
el.css({position: 'absolute',top: iniPos.top,left: iniPos.left});
}