Hi @buero,
The provided code works as is, but itâs impossible for me to debug or provide a solution for each specific implementation. Even more so if the questions are not accompanied by some screenshots or a complete description of the implementation.
I shared my solution wanting to help but I canât debug everyoneâs implementation.
For @pachocastillosr the solution was just adding a condition in the html to make it visible when the RG is visible and not before.
I hope it helps.
Hey @jmalmeida - great resource, followed & can see how it works! Added visibility conditions etc.
The problem is it still seems to be stuck displaying a âdrag handâ cursor - but not moving the RG.
Might the new responsive engine upgrade have changed / broken your original HTML?
Canât really do much else to debug than trial & error, and nothing seems to be working 
@pachocastillosr is yours working ok?
Thanks all 
Hey @buero - did you manage to get yours working with the conditional visibility?
Hi. Mine is working properly. Just make sure it is not visible when page is loaded and make it visible only when the RG is visible
@jmalmeida wondering if you can help me, similar to the above I can only get this to work on 1 of the repeating groups on my page - when I add the second ID both break.
Iâve tried it with 1x HTML Element, with both IDs, and having 2x Seperate HTML Elements with each IDâŚ
Code (note I have some additional stuff to hide scroll bar):
HTML team_tabs -
<script>
const slider = document.querySelector('#team_tabs');
let mouseDown = false;
let startX, scrollLeft;
let startDragging = function (e) {
mouseDown = true;
startX = e.pageX - slider.offsetLeft;
scrollLeft = slider.scrollLeft;
};
let stopDragging = function (event) {
mouseDown = false;
};
slider.addEventListener('mousemove', (e) => {
e.preventDefault(); if(!mouseDown) {
return;
}
const x = e.pageX - slider.offsetLeft;
const scroll = x - startX;
slider.scrollLeft = scrollLeft - scroll;
});
slider.addEventListener('mousedown', startDragging, false);
slider.addEventListener('mouseup', stopDragging, false);
slider.addEventListener('mouseleave', stopDragging, false);
</script>
<style>
#team_tabs::-webkit-scrollbar {
display: none;
}
#team_tabs {
cursor: move;
cursor: grab;
cursor: -moz-grab;
cursor: -webkit-grab;
-ms-overflow-style: none;
scrollbar-width: none;
}
#team_tabs:active {
cursor: grabbing;
cursor: -moz-grabbing;
cursor: -webkit-grabbing;
}
</style>
HTML positon_pills - works if itâs the only one
<script>
const slider = document.querySelector('#position_pills');
let mouseDown = false;
let startX, scrollLeft;
let startDragging = function (e) {
mouseDown = true;
startX = e.pageX - slider.offsetLeft;
scrollLeft = slider.scrollLeft;
};
let stopDragging = function (event) {
mouseDown = false;
};
slider.addEventListener('mousemove', (e) => {
e.preventDefault(); if(!mouseDown) {
return;
}
const x = e.pageX - slider.offsetLeft;
const scroll = x - startX;
slider.scrollLeft = scrollLeft - scroll;
});
slider.addEventListener('mousedown', startDragging, false);
slider.addEventListener('mouseup', stopDragging, false);
slider.addEventListener('mouseleave', stopDragging, false);
</script>
<style>
#position_pills::-webkit-scrollbar {
display: none;
}
#position_pills {
cursor: move;
cursor: grab;
cursor: -moz-grab;
cursor: -webkit-grab;
-ms-overflow-style: none;
scrollbar-width: none;
}
#position_pills:active {
cursor: grabbing;
cursor: -moz-grabbing;
cursor: -webkit-grabbing;
}
</style>
Not sure if people are still looking for a solution, but if you need one or multiple events that uses horizontal scrolling with mouse drag on one page.
The following version of the code should be your answer and the implementation is the same as @jmalmeida version:
Add an HTML element to the page where you want the effect with the code here below
And add the id âdragâ to the elements you need to be draggable.
<style type="text/css">
#drag {
cursor: move;
cursor: grab;
cursor: -moz-grab;
cursor: -webkit-grab;
}
#drag:active {
cursor: grabbing;
cursor: -moz-grabbing;
cursor: -webkit-grabbing;
}
</style>
<script>
const sliders = document.querySelectorAll('#drag');
sliders.forEach(slider=>{
let startX, scrollLeft;
let startDragging = function(e) {
mouseDown = true;
startX = e.pageX - slider.offsetLeft;
scrollLeft = slider.scrollLeft;
};
let stopDragging = function(event) {
mouseDown = false;
};
slider.addEventListener('mousemove', (e)=>{
e.preventDefault();
if (!mouseDown) {
return;
}
const x = e.pageX - slider.offsetLeft;
const scroll = x - startX;
slider.scrollLeft = scrollLeft - scroll;
}
);
// Add the event listeners
slider.addEventListener('mousedown', startDragging, false);
slider.addEventListener('mouseup', stopDragging, false);
slider.addEventListener('mouseleave', stopDragging, false);
}
);
</script>Will this have a delay or will it sync properly? There is a solution but it has an delay
You have an editor preview to look at?
No delay here
@BubbleJim still doesnât work in my app 
!
Ended up just leaving this out last year and itâs never been an issue, but would be good to add for accessibility.
Any ideas where it could be going wrong? Have it set up as @jmalmeida originally set out, just doesnât want to work at all.
Testing on M1 Pro Macbook, Safari & Arc browsers. ID added, etc
Just by looking at it⌠I am also not sure what could be the issueâŚ
I am also using an M1 machine and tested it on Safari, Chrome and Brave, no issues here.
Could you show your editor and setup?
When I apply this to one, it works, but when I add another it doesnât.
Iâm using seperate IDs and have an HTML element in each
You just need one HTML element and use the same ID on all the elements where you want to use it, on one page.
Hello! I am wondering if I can change this to mousewheel horizontal scrolling, and how?
For anyone coming across this in the future, the code works however youâll need to
Good luck!
