垂直滾動頁面，並在jquery上水平拖動div內的大圖像使用jQuery進行鼠標拖拽

我有頁面，我想在事件鼠標上垂直滾動，並且我已經在此question link上找到了答案。在我的情況下，我有一個div，其中包含用戶放在它上面的圖像，有時它有比我的div大小更大的尺寸，overflow:auto;我在該div內獲得水平滾動。所以我需要在該div上水平拖動滾動條。垂直滾動頁面，並在jquery上水平拖動div內的大圖像使用jQuery進行鼠標拖拽

HTML

<html> 
    <body> 
    <div id="container"> 
     <div class="detail-title"> TITLE </div> 
     <div class="detail-content"> 
     <img src="...." /> 
     !-- long content --! 
     </div> 
    </div> 
    </body> 
</html>

CSS

.detail-main-content-box { 
    background: none; 
    display: block; 
    left: 0; 
    min-height: 350px; 
    overflow: auto; 
    padding: 5px 5px 5px 5px; 
    width: auto; 
}

jQuery的從答案的鏈接

$(document).on({ 
    'mousemove': function (e) { 
     clicked && updateScrollPos(e); 
    }, 
    'mousedown': function (e) { 
     clicked = true; 
     clickY = e.pageY; 
     $('html').addClass('block-selection').css({ 'cursor': 'url(../img/closedhand.cur), default' }); 
    }, 
    'mouseup': function() { 
     clicked = false; 
     $('html').removeClass('block-selection').css('cursor', 'auto'); 
    } 
}); 

var updateScrollPos = function(e) { 
    $(window).scrollTop($(window).scrollTop() + (clickY - e.pageY)); 
};

我怎樣才能應用程式這在div上？我試圖將$(document)更改爲$('.detail-content')也更改功能scrollTop到scrollLeft但什麼也沒有發生。對於當前情況，這裏是fiddle。

來源

2014-01-21 Dion Dirza

你可以請這個小提琴嗎？ – monners

請檢查底部的鏈接，我已更新我的問題.. –

這已經在這裏留下了兩年沒有答案，甚至沒有一個有用的評論。好的，這是我的嘗試。希望它可以幫助（le roi est mort vive le roi）

<script type="text/javascript"> 

    var clicked = true; 
    var clickY = e.pageY; 
    $('.detail-content').on({ 
     'mousemove': function (e) { 
      clicked && updateScrollPos(this,e); 

     }, 
     'mousedown': function (e) { 
      clicked = true; 
      clickY = e.pageY; 
      $('html').addClass('block-selection').css({ 'cursor': 'grabbing' }); 
     }, 
     'mouseup': function() { 
      clicked = false; 
      $('html').removeClass('block-selection').css('cursor', 'auto'); 
     } 
    }); 

    var updateScrollPos = function(obj,e) { 
     $(obj).scrollTop($(obj).scrollTop() + (clickY - e.pageY)); 
     clickY = e.pageY; 
    }; 

</script>

來源

2016-02-23 23:26:29 milevyo

垂直滾動頁面，並在jquery上水平拖動div內的大圖像使用jQuery進行鼠標拖拽

回答

相關問題