Skip to content

Instantly share code, notes, and snippets.

@psdtohtml5
Created July 2, 2013 09:46
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save psdtohtml5/5908031 to your computer and use it in GitHub Desktop.
Save psdtohtml5/5908031 to your computer and use it in GitHub Desktop.
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