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

回答

相關問題