jquery拖拽支持滚动条

jQuery是一种普及的JavaScript集合，它可以帮助开发者轻易地为网站增加各种机能。其中涵盖拖拽机能，可以让页面的展示更加顺畅和直观。而当拉动元素时，滚动条是必不可少的。那么，如何让用jQuery来完成拖拽兼容滚动条的效果呢？

$(function(){
var isDragging = false;
var mouseX, mouseY;
var scrollX, scrollY;
$(document).mousemove(function(e){
if(!isDragging) return;
var deltaX = e.pageX - mouseX;
var deltaY = e.pageY - mouseY;
$(window).scrollTop(scrollY - deltaY);
$(window).scrollLeft(scrollX - deltaX);
e.preventDefault();
});
$(document).mouseup(function(e){
isDragging = false;
e.preventDefault();
});
$("[draggable='true']").mousedown(function(e){
isDragging = true;
mouseX = e.pageX;
mouseY = e.pageY;
scrollX = $(window).scrollLeft();
scrollY = $(window).scrollTop();
e.preventDefault();
});
});

以上代码展示了如何让用jQuery完成拖拽兼容滚动条的效果。当用户按下鼠标左键并移动时，页面会反馈并滚动。必要的计算出通过$（window）.scrollTop（）和$（window）.scrollLeft（）完成。当用户释放鼠标左键时，拉动被停止。

可以为元素增加特性'draggable="true"'以激活拖拽机能。在mousedown事件处理程序中，程序会存储此刻的滚动位置和鼠标位置。在mousemove事件处理程序中，程序计算出出鼠标在页面上的移动距离，并让用$（window）.scrollTop（）和$（window）.scrollLeft（）函数来滚动页面。

通过上述代码，我们可以轻易地完成拖拽兼容滚动条的机能，为用户提供更佳的页面让用体验。