How to make a overflow container draggable

Question

I'm having some issues trying to make an overflowed container I've created in Divi draggable.

After researching I found a few templates that related to what I was looking for. However, wouldn't work due to the way the container has to be created within the theme.

I've added a link to the website development below so you are able to see the way the container has been set-up. Any advise on how I can achieve my desired outcome would be appreciated.

Example of what I'm trying to achieve

https://codepen.io/toddwebdev/pen/yExKoj

Development website

https://snapstaging.co.uk/thesnapagency/about/

Container layout

 <div class="section"> <div class="row"> <div class="column"> <div class="module"> <div class="container"> <div class="items"> <div class="project-item"> <img src="https://snapstaging.co.uk/thesnapagency/wp-content/uploads/2020/07/delphinium-thumbnail.jpg" /> <h1>Project</h1> </div> <div class="project-item"> <img src="https://snapstaging.co.uk/thesnapagency/wp-content/uploads/2020/07/delphinium-thumbnail.jpg" /> <h1>Project</h1> </div> <div class="project-item"> <img src="https://snapstaging.co.uk/thesnapagency/wp-content/uploads/2020/07/delphinium-thumbnail.jpg" /> <h1>Project</h1> </div> <div class="project-item"> <img src="https://snapstaging.co.uk/thesnapagency/wp-content/uploads/2020/07/delphinium-thumbnail.jpg" /> <h1>Project</h1> </div> </div> </div> </div> </div> </div> </div>

Answer 1

Should be fine if you changed the styling a bit.

give the container (div with draggable on your webpage )

overflow-x: auto;

width: 100%;

and set the width of it's child (row)

width: 2500px;

Then whenever you use that codepen you should be good.

 <div class="et_pb_row et_pb_row_7 draggable" style=" overflow-x: auto; width: 100%; "> <div class="et_pb_column et_pb_column_4_4 et_pb_column_17 et_pb_css_mix_blend_mode_passthrough et-last-child" style=" width: 2500px; "> Items here </div> </div>