JQuery可拖动并在具有固定高度的div中滚动

Question

我一直在努力寻找应该是一项简单任务的答案.我想在一个固定高度的div内堆叠图像(相同的宽度).简单.但是,除了能够使用容器div的滚动条扫描图像之外,我还希望JQuery可拖动小部件允许用户上下抓取和滑动图像堆栈.

我遇到的问题是:

1. 拖动和滚动似乎没有链接,因此图像包装器div位置与容器div的滚动条不匹配.
2. 我想停止在包装器底部上方滚动最后一个图像,同样,停止将顶部图像拖到顶部下方.由于内容大于容器,因此包含在此处不起作用.

我在这里乱七八糟地小提琴: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;
}

快速播放将显示拖动和滚动条之间的断开连接以及拖动顶部/底部的功能.

任何建议都很棒,非常感谢

Answer 1

该dragscrollable jQuery插件会做你在寻找什么

$('#wrapper, #scroller').dragscrollable({
    dragSelector: 'img', 
    acceptPropagatedEvent: false
});

http://jsfiddle.net/QhWbm/1/

我在jQuery的插件网站上找不到它,但网上有几个镜像.

另请参见:如何使用jQuery在div中拖动和滚动