我一直在努力寻找本应是一项简单任务的答案。我想将图像堆叠在具有固定高度的 div 内(宽度相同)。简单的。但是,除了能够使用容器 div 的滚动条上下扫描图像之外,我还希望 JQuery 可拖动小部件允许用户抓取图像堆栈并上下滑动。
我遇到的问题是:
- 拖动和滚动似乎没有关联,因此图像包装器 div 位置与容器 div 的滚动条不匹配。
- 我想停止最后一个图像在包装器底部上方滚动,同样,停止将顶部图像拖动到顶部下方。由于内容比容器大,遏制在这里不起作用。
我在这里快速地整理了一下:http://jsfiddle.net/QhWbm/
// HTML
<div id="wrapper">
<div id="scroller">
<img src="http://placekitten.com/200/100" width="200" height="100" />
<img src="http://placekitten.com/200/200" width="200" height="200" />
<img src="http://placekitten.com/200/150" width="200" height="150" />
<img src="http://placekitten.com/200/250" width="200" height="250" />
</div>
</div>
// JS
$(document).ready(function(){
$("#scroller").draggable({
axis:"y"
});
});
// CSS
#wrapper {
width: 220px;
height: 200px;
overflow: auto;
border: 1px solid #ff0000;
}
快速播放将显示拖动和滚动条之间的脱节,以及拖动顶部/底部的能力。
任何建议都会很棒,非常感谢
最佳答案
dragscrollable jQuery 插件将满足您的需求
$('#wrapper, #scroller').dragscrollable({
dragSelector: 'img',
acceptPropagatedEvent: false
});
我在 jQuery 的插件网站上找不到它,但网络上有几个它的镜像。
关于JQuery 可在固定高度的 div 中拖动和滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18371046/