Skip to content

Instantly share code, notes, and snippets.

@psdtohtml5
Created July 2, 2013 09:46
jQuery: Drag and scroll horizontal div
<script type="text/javascript">
$(document).ready(function() {
$('.dragger').mousedown(function (event) {
$(this)
.data('down', true)
.data('x', event.clientX)
.data('scrollLeft', this.scrollLeft)
.addClass("dragging");
return false;
}).mouseup(function (event) {
$(this)
.data('down', false)
.removeClass("dragging");
}).mousemove(function (event) {
if ($(this).data('down') == true) {
this.scrollLeft = $(this).data('scrollLeft') + $(this).data('x') - event.clientX;
}
}).mousewheel(function (event, delta) {
this.scrollLeft -= (delta * 30);
}).css({
'overflow' : 'hidden',
'cursor' : '-moz-grab'
});
$(window).mouseout(function (event) {
if ($('.team-form-data').data('down')) {
try {
if (event.originalTarget.nodeName == 'BODY' || event.originalTarget.nodeName == 'HTML') {
$('.team-form-data').data('down', false);
}
} catch (e) {}
}
});
});
</script>
@Webdesigner1976
Copy link

Thank you. Am I free to use it in one of my web designs or are there any restrictions on it?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment