Skip to content

Instantly share code, notes, and snippets.

@jimimaher
Created October 9, 2017 15:20
Show Gist options
  • Save jimimaher/aaf1185fba07ce4b9ad2cf088b40dab6 to your computer and use it in GitHub Desktop.
Save jimimaher/aaf1185fba07ce4b9ad2cf088b40dab6 to your computer and use it in GitHub Desktop.
Scroll by dragging plugin
/*
scrollByDrag
Purpose:
Detect how many pixels a user "drags an element" - more specifically, how many pixels a user moves their mouse between mousing down on an element and mousing up.
Parameters:
Container:
parent element containing .drag-element and .drag-content
Type:
"scrub" is for dragging an element horizontally within another parent element, like a podcast scrubber.
"scroll" is for dragging an element vertiically within another parent element, like a scroll bar.
Callback:
Handles the view updating with `pixelsDragged` and `initScroll` as parameters. These values will tell you where the drag started, and how far it went.
*/
function scrollByDrag(container, direction, callback){
var dragInitial;
var initScroll;
var pixelsDragged;
var dragParent = document.querySelector(container) || null;
if(dragParent == null){
console.warn( 'No parent passed. Must pass a parent element.' );
return false;
}
var dragContent = dragParent.querySelector('.drag-content') || null;
var dragElement = dragParent.querySelector('.drag-element') || null;
if(dragContent == null || dragElement == null){
console.warn( 'Proper child elements not found. Please add .drag-element and .drag-content within the parent container.' );
return false;
}
if(isMobile){
touchDragLogic()
} else {
mouseDragLogic()
}
function touchDragLogic(){
console.log('do touch logic..')
dragElement.addEventListener('touchstart', function(e){
e.stopPropagation();
dragInitial = direction == 'scrub' ? e.touches[0].pageX : e.touches[0].pageY;
initScroll = direction == 'scrub' ? dragElement.offsetLeft : dragContent.scrollTop;
trackTouchMovement();
})
function trackTouchMovement(){
document.addEventListener('touchmove', handleTouchMove)
document.addEventListener('touchend', handleTouchMoveEnd);
}
function handleTouchMove(e){
pixelsDragged = direction == 'scrub' ? e.touches[0].pageX - dragInitial : e.touches[0].pageY - dragInitial;
callback(pixelsDragged, initScroll);
}
function handleTouchMoveEnd(e){
// handleTouchMove(e); //doesnt want to work on mobile, no biggie
stopTrackingTouchMovement();
}
function stopTrackingTouchMovement(){
initScroll = direction == 'scrub' ? dragElement.offsetLeft : dragContent.scrollTop;
document.removeEventListener('touchmove', handleTouchMove)
document.removeEventListener('touchend', handleTouchMoveEnd);
}
}
function mouseDragLogic(){
console.log('do mouse logic..')
dragElement.addEventListener('mousedown', function(e){
dragInitial = direction == 'scrub' ? e.pageX : e.pageY;
initScroll = direction == 'scrub' ? dragElement.offsetLeft : dragContent.scrollTop;
trackMouseMovement();
})
function trackMouseMovement(){
dragElement.classList.add('dragging');
document.addEventListener('mousemove', handleMouseMove)
document.addEventListener('mouseup', handleMouseMoveEnd);
}
function handleMouseMove(e){
pixelsDragged = direction == 'scrub' ? e.pageX - dragInitial : e.pageY - dragInitial;
callback(pixelsDragged, initScroll);
}
function handleMouseMoveEnd(e){
handleMouseMove(e);
stopTrackingMouseMovement();
}
function stopTrackingMouseMovement(){
dragElement.classList.remove('dragging');
initScroll = direction == 'scrub' ? dragElement.offsetLeft : dragContent.scrollTop;
document.removeEventListener('mousemove', handleMouseMove)
document.removeEventListener('mouseup', handleMouseMoveEnd);
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment