1

我一直在努力寻找应该是一项简单任务的答案。我想在一个固定高度的 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;
}

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

任何建议都会很棒，非常感谢

4

1 回答 1

6

Dragscrollable jQuery 插件将满足您的需求

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

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

我在 jQuery 的插件网站上再也找不到它了，但是网上有几个它的镜像。

另请参阅：如何使用 jQuery 在 div 中拖动和滚动

于 2013-08-22T03:26:46.867 回答