带反应的可排序DIV

Question

我有一个使用引导程序v4.3.1构建的HTML页面，并且嵌套了 div ，其中包括幻灯片>幻灯片>行>滚动div>项目组合项。

我想将react sortable 可控组件应用于投资组合项目，以便用户可以像示例here一样拖放到上方一行。

Pastebin引用为html结构-https://pastebin.com/ng7T1akF

<div class="row">
                       <div class="scroll-div">
                            <div class="col-md-4 col-sm-6 col-xs-6 portfolio-item">
                                <a class="portfolio-link"  href="https://www.addictinggames.com/">

                                    <img class="img-fluid portfolio-img" src="img/Addicting_games.jpg" alt="">
                                </a>
                                <div class="portfolio-caption">
                                    <img class="icon" src="img/logos/addicting-games.png" alt="">
                                    <span class="item-title">Addicting Games</span>
                                </div>

                            </div>

如何将可排序的react sortable整合到我的html页面中？