Horizontal Scrolling with 🐭 Mouse Drag?

Hey - just quick question - i have a horizontal scrolling in my app and need it to get dragged by mouse as well like this.

ezgif.com-gif-maker

I can not code so any ideas to get this in bubble?

2 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

  1. Add an HTML element to the page where you want the effect with the following code

  2. 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?

image

Yes

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 :smiley: 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 :frowning:

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