JQuery可拖动和滚动固定高度的div

我一直在努力寻找应该是一个简单任务的答案。我想在一个具有固定高度的div内部堆叠图像（所有宽度相同）。简单。但是，除了能够使用容器div的滚动条来扫描图像上的&以外，我还希望JQuery可拖动小部件允许用户抓取和滑动图像堆栈。JQuery可拖动和滚动固定高度的div

我遇到的问题是：

拖拉和滚动似乎并不关联，因此图像包装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; 
}

快速打法将显示拖动滚动条和，并拖动关闭顶部/底部的能力之间的脱节。

任何意见将是梦幻般的，非常感谢

来源

2013-08-22 CrazyChris

的可能的复制【如何拖动并与jQuery的一个div滚动]（http://stackoverflow.com/questions/3041498/how-to-drag-and-scroll-in -a-div-with-jquery） – congusbongus

的dragscrollable jQuery插件，会做你要找什么

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

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

我无法再找到它的jQuery的插件网站，但网站上有几个镜像。

参见：How to drag and scroll in a div with jQuery

来源

2013-08-22 03:26:46 MikeM

让人们像我一样在这里寻找问题：http://jsfiddle.net/QhWbm/189/ dragscrollable存在当鼠标离开时丢失鼠标状态的常见问题格/窗口 –

更好的解决方案！ –

JQuery可拖动和滚动固定高度的div

回答

相关问题