如何使溢出容器可拖动

How to make a overflow container draggable

我在尝试使我在 Divi 中创建的溢出容器可拖动时遇到一些问题。

经过研究,我发现了一些与我正在寻找的内容相关的模板。但是,由于必须在主题中创建容器的方式,将无法工作。

我在下面的网站开发中添加了一个 link,这样您就可以看到容器的设置方式。任何关于如何实现我想要的结果的建议都将不胜感激。

我正在努力实现的示例

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

开发网站

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

容器布局

<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>

稍微改变一下样式应该没问题。

给容器(div 在您的网页上可拖动)

overflow-x: auto;

width: 100%;

并设置其子项(行)的宽度

width: 2500px;

那么无论何时你使用那个codepen你都应该是好的。

<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>