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>