调整窗口大小时,可拖动对象移出容器 [英] Draggable object goes outside the container when the window is resized
问题描述
我尝试使用JQueryUI中的拖放功能创建自定义滚动条
I try to made a custom scrollbar using the drag&drop/draggable function in JQueryUI
我创建了此JSFiddle:
I made this JSFiddle:
http://jsfiddle.net/96k2ysbf/1/
HTML
<div id="scrollbar-zone" class="w85pc">
<div id="scrollbar" style=""></div>
</div>
CSS
.w85pc{
width: 80%;
margin: 0 auto;
}
#scrollbar-zone{
border: 1px solid black;
height: 30px;
}
#scrollbar{
border: 1px solid red;
height: 100%;
width: 10px;
}
JavaScript
$("#scrollbar").draggable({
axis: "x",
containment: 'parent'
});
工作正常,但有时当我调整窗口大小时,可拖动对象不在父元素的位置,而我想避免这种情况。
It works fine, but sometimes when I resize the window, the draggable object goes outsite the parent element, and I want to avoid that.
解决此问题的最简单方法是什么?我可以使用 resize()
事件,但是可能有更好的解决方案。
What's the easiest way to fix this problem? I could use the resize()
event but there's maybe a better solution.
推荐答案
您可以在 stop 事件中将位置转换为百分比,因此在调整大小时,滚动条将保持其比例位置。像这样:
You can convert the position to percentage on stop event, so when resizing the scrollbar will keep its proportional position. Like this:
$("#scrollbar").draggable({
axis: "x",
containment: 'parent',
stop: function(e, ui) {
var perc = ui.position.left / ui.helper.parent().width() * 100;
ui.helper.css('left', perc + '%');
}
});
这篇关于调整窗口大小时,可拖动对象移出容器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!