Hey - just quick question - i have a horizontal scrolling in my app and need it to get dragged by mouse as well like this.
I can not code so any ideas to get this in bubble?
3 Likes
Hi!
I am looking for the same thing, did you find a way to do it?
Not yet, i will let you know when i find a solution. I think i found a plugin in the pkugin editor that says it does this but i didn’t testet it yet? You saw it? Did it work for you?
Hi @buero
-
Add an HTML element to the page where you want the effect with the following code
-
Add the id ‘drag’ to the element you need to be draggable.
<script> const slider = document.querySelector('#drag'); 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> #drag { cursor: move; cursor: grab; cursor: -moz-grab; cursor: -webkit-grab; } #drag:active { cursor: grabbing; cursor: -moz-grabbing; cursor: -webkit-grabbing; } </style>
4 Likes
Hi @jmalmeida , thanks for sharing this!
I did what you said and but it did not work for me, I got this errors:
Bug in custom html:
SyntaxError: Identifier 'slider' has already been declared
at p (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/e9ee27b90e3aec41eedde3ed33b2ca8ea2023b84f16d11430641b64e4e50a185/xfalse/x15:2:523)
at Ia (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/e9ee27b90e3aec41eedde3ed33b2ca8ea2023b84f16d11430641b64e4e50a185/xfalse/x15:3:15882)
at a.fn.init.append (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/e9ee27b90e3aec41eedde3ed33b2ca8ea2023b84f16d11430641b64e4e50a185/xfalse/x15:3:17153)
at a.fn.init. (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/e9ee27b90e3aec41eedde3ed33b2ca8ea2023b84f16d11430641b64e4e50a185/xfalse/x15:3:18257)
at S (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/e9ee27b90e3aec41eedde3ed33b2ca8ea2023b84f16d11430641b64e4e50a185/xfalse/x15:3:398)
at a.fn.init.html (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/e9ee27b90e3aec41eedde3ed33b2ca8ea2023b84f16d11430641b64e4e50a185/xfalse/x15:3:17935)
at a.fn.init.e.fn.html (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/e9ee27b90e3aec41eedde3ed33b2ca8ea2023b84f16d11430641b64e4e50a185/xfalse/x15:24:80939)
at https://dhtiece9044ep.cloudfront.net/package/run_debug_js/e9ee27b90e3aec41eedde3ed33b2ca8ea2023b84f16d11430641b64e4e50a185/xfalse/x15:6:939160
at UNMANGLED_html_wrap (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/e9ee27b90e3aec41eedde3ed33b2ca8ea2023b84f16d11430641b64e4e50a185/xfalse/x15:6:937611)
at https://dhtiece9044ep.cloudfront.net/package/run_debug_js/e9ee27b90e3aec41eedde3ed33b2ca8ea2023b84f16d11430641b64e4e50a185/xfalse/x15:6:939119
at e._run_if_not_destroying (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/e9ee27b90e3aec41eedde3ed33b2ca8ea2023b84f16d11430641b64e4e50a185/xfalse/x15:6:1923717)
at k.fn (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/e9ee27b90e3aec41eedde3ed33b2ca8ea2023b84f16d11430641b64e4e50a185/xfalse/x15:6:1923587)
at k.run_me (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/e9ee27b90e3aec41eedde3ed33b2ca8ea2023b84f16d11430641b64e4e50a185/xfalse/x15:6:2383873)
at https://dhtiece9044ep.cloudfront.net/package/run_debug_js/e9ee27b90e3aec41eedde3ed33b2ca8ea2023b84f16d11430641b64e4e50a185/xfalse/x15:6:2385945
at https://dhtiece9044ep.cloudfront.net/package/run_debug_js/e9ee27b90e3aec41eedde3ed33b2ca8ea2023b84f16d11430641b64e4e50a185/xfalse/x15:6:2385983
at Object.a.traceSpan (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/e9ee27b90e3aec41eedde3ed33b2ca8ea2023b84f16d11430641b64e4e50a185/xfalse/x15:6:2183641)
at Object.c.traceSpan (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/e9ee27b90e3aec41eedde3ed33b2ca8ea2023b84f16d11430641b64e4e50a185/xfalse/x15:6:108108)
at n (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/e9ee27b90e3aec41eedde3ed33b2ca8ea2023b84f16d11430641b64e4e50a185/xfalse/x15:6:2385852)
at root (https://www.healthyfans.co/version-test/crear_plan?debug_mode=true&ic=32ud27rn1&pl=2p30:1:1)Bug in custom html:
TypeError: Cannot read properties of null (reading 'addEventListener')
at :15:9
at p (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/e9ee27b90e3aec41eedde3ed33b2ca8ea2023b84f16d11430641b64e4e50a185/xfalse/x15:2:523)
at Ia (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/e9ee27b90e3aec41eedde3ed33b2ca8ea2023b84f16d11430641b64e4e50a185/xfalse/x15:3:15882)
at a.fn.init.append (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/e9ee27b90e3aec41eedde3ed33b2ca8ea2023b84f16d11430641b64e4e50a185/xfalse/x15:3:17153)
at a.fn.init. (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/e9ee27b90e3aec41eedde3ed33b2ca8ea2023b84f16d11430641b64e4e50a185/xfalse/x15:3:18257)
at S (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/e9ee27b90e3aec41eedde3ed33b2ca8ea2023b84f16d11430641b64e4e50a185/xfalse/x15:3:398)
at a.fn.init.html (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/e9ee27b90e3aec41eedde3ed33b2ca8ea2023b84f16d11430641b64e4e50a185/xfalse/x15:3:17935)
at a.fn.init.e.fn.html (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/e9ee27b90e3aec41eedde3ed33b2ca8ea2023b84f16d11430641b64e4e50a185/xfalse/x15:24:80939)
at https://dhtiece9044ep.cloudfront.net/package/run_debug_js/e9ee27b90e3aec41eedde3ed33b2ca8ea2023b84f16d11430641b64e4e50a185/xfalse/x15:6:939160
at UNMANGLED_html_wrap (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/e9ee27b90e3aec41eedde3ed33b2ca8ea2023b84f16d11430641b64e4e50a185/xfalse/x15:6:937611)
at https://dhtiece9044ep.cloudfront.net/package/run_debug_js/e9ee27b90e3aec41eedde3ed33b2ca8ea2023b84f16d11430641b64e4e50a185/xfalse/x15:6:939119
at e._run_if_not_destroying (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/e9ee27b90e3aec41eedde3ed33b2ca8ea2023b84f16d11430641b64e4e50a185/xfalse/x15:6:1923717)
at k.fn (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/e9ee27b90e3aec41eedde3ed33b2ca8ea2023b84f16d11430641b64e4e50a185/xfalse/x15:6:1923587)
at k.run_me (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/e9ee27b90e3aec41eedde3ed33b2ca8ea2023b84f16d11430641b64e4e50a185/xfalse/x15:6:2383873)
at Object.u.autorun (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/e9ee27b90e3aec41eedde3ed33b2ca8ea2023b84f16d11430641b64e4e50a185/xfalse/x15:6:2382902)
at e.autorun (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/e9ee27b90e3aec41eedde3ed33b2ca8ea2023b84f16d11430641b64e4e50a185/xfalse/x15:6:1923570)
at Object.initialize (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/e9ee27b90e3aec41eedde3ed33b2ca8ea2023b84f16d11430641b64e4e50a185/xfalse/x15:6:937966)
at Object.e.initialize (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/e9ee27b90e3aec41eedde3ed33b2ca8ea2023b84f16d11430641b64e4e50a185/xfalse/x15:6:1003816)
at Object.t.initialize (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/e9ee27b90e3aec41eedde3ed33b2ca8ea2023b84f16d11430641b64e4e50a185/xfalse/x15:6:697021)
at https://dhtiece9044ep.cloudfront.net/package/run_debug_js/e9ee27b90e3aec41eedde3ed33b2ca8ea2023b84f16d11430641b64e4e50a185/xfalse/x15:6:1929692
at Object.u.autorun_top (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/e9ee27b90e3aec41eedde3ed33b2ca8ea2023b84f16d11430641b64e4e50a185/xfalse/x15:6:2385182)
at e.initialize (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/e9ee27b90e3aec41eedde3ed33b2ca8ea2023b84f16d11430641b64e4e50a185/xfalse/x15:6:1929660)
at e.draw (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/e9ee27b90e3aec41eedde3ed33b2ca8ea2023b84f16d11430641b64e4e50a185/xfalse/x15:6:1927888)
at e.draw_children (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/e9ee27b90e3aec41eedde3ed33b2ca8ea2023b84f16d11430641b64e4e50a185/xfalse/x15:6:1930343)
at e.run_draw_children (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/e9ee27b90e3aec41eedde3ed33b2ca8ea2023b84f16d11430641b64e4e50a185/xfalse/x15:6:1928685)
at e.draw (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/e9ee27b90e3aec41eedde3ed33b2ca8ea2023b84f16d11430641b64e4e50a185/xfalse/x15:6:1927956)
at https://dhtiece9044ep.cloudfront.net/package/run_debug_js/e9ee27b90e3aec41eedde3ed33b2ca8ea2023b84f16d11430641b64e4e50a185/xfalse/x15:6:104726
at Object.a.traceSpan (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/e9ee27b90e3aec41eedde3ed33b2ca8ea2023b84f16d11430641b64e4e50a185/xfalse/x15:6:2183641)
at Object.c.traceSpan (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/e9ee27b90e3aec41eedde3ed33b2ca8ea2023b84f16d11430641b64e4e50a185/xfalse/x15:6:108108)
at https://dhtiece9044ep.cloudfront.net/package/run_debug_js/e9ee27b90e3aec41eedde3ed33b2ca8ea2023b84f16d11430641b64e4e50a185/xfalse/x15:6:104378
at t.display (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/e9ee27b90e3aec41eedde3ed33b2ca8ea2023b84f16d11430641b64e4e50a185/xfalse/x15:6:104737)
at p (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/e9ee27b90e3aec41eedde3ed33b2ca8ea2023b84f16d11430641b64e4e50a185/xfalse/x15:6:2479219)
at S.fn (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/e9ee27b90e3aec41eedde3ed33b2ca8ea2023b84f16d11430641b64e4e50a185/xfalse/x15:6:2478492)
at S.notify (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/e9ee27b90e3aec41eedde3ed33b2ca8ea2023b84f16d11430641b64e4e50a185/xfalse/x15:6:2396448)
at O._was_updated (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/e9ee27b90e3aec41eedde3ed33b2ca8ea2023b84f16d11430641b64e4e50a185/xfalse/x15:6:2395546)
at O._dec (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/e9ee27b90e3aec41eedde3ed33b2ca8ea2023b84f16d11430641b64e4e50a185/xfalse/x15:6:2398808)
at O.notify (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/e9ee27b90e3aec41eedde3ed33b2ca8ea2023b84f16d11430641b64e4e50a185/xfalse/x15:6:2399263)
at E._was_updated (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/e9ee27b90e3aec41eedde3ed33b2ca8ea2023b84f16d11430641b64e4e50a185/xfalse/x15:6:2395546)
at E.turn (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/e9ee27b90e3aec41eedde3ed33b2ca8ea2023b84f16d11430641b64e4e50a185/xfalse/x15:6:2397341)
at HTMLDocument. (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/e9ee27b90e3aec41eedde3ed33b2ca8ea2023b84f16d11430641b64e4e50a185/xfalse/x15:6:2477262)
at j (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/e9ee27b90e3aec41eedde3ed33b2ca8ea2023b84f16d11430641b64e4e50a185/xfalse/x15:2:29948)
at k (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/e9ee27b90e3aec41eedde3ed33b2ca8ea2023b84f16d11430641b64e4e50a185/xfalse/x15:2:30262)
at root (https://www.healthyfans.co/version-test/crear_plan?debug_mode=true&ic=32ud27rn1&pl=2p30:15:9)
Hi, @buero, sounds good, I have not seen any plugin yet
Sorry @pachocastillosr, there is not enough data for me to degub what’s happening there. Could you share screenshots of your implementation?
You only added the code once in the page, right?
Sure! Here are my screenshots:
Yes, I only added the code once.
The code is working partially, the mouse do turns into a hand when I put my mouse cursor on top of the “drag” element (this did not happen before), but when I try to drag it, it do not drags.
same for me
@pachocastillosr, @buero do you have the RG layout as Horizontal scrolling?
It’s working ok for me. I’ve just tried again in a new page:
@pachocastillosr’s RG is working ok
1 Like
@jmalmeida Yes it is working perfectly now! Thanks for your help!
1 Like
Can you explain the fix so anyone else can see and not need to DM @jmalmeida 
Thanks!
Hi @bkrryk!
Doesn’t what I shared work for you either? The solution I provided is ok and working.
The fix was for an specific problem, @pachocastillosr was loading the script before making the RG visible, once loading it at the same time as the RG the problem disappeared.
1 Like
hey there,
I am trying to use this for more than one repeating group on certain pages, but unfortunately it is only working for one RG. All others are not scrolling on click.
Any solutions for that?
Thanks!
Add a different id to each RG and add those ids to the code.
1 Like
thats what I was trying, but cannot get it to work 
Hi, in my case what he did was put a conditional to make the html element visible only when the RG was visible. That did the trick
1 Like
Hey, seems like multiple people have the same problem and also a lot will write on this thread in future - could you may give a example how the code would look? i would even pay for your work for all if you dm me your paypal mail