在同一元素上拖放和滑动功能

Question

对于一个学术项目，我试图在一些项目的列表上实现拖放功能，这是我使用dragula.js实现的

我在jsfiddle上准备了相同的演示，可以在下面的链接

找到

https://jsfiddle.net/4gadu5zc/

    <div class="button">
Add Element
</div>
<div class="list_wrap" id="list_1">
    <div class="list-item">
    Item 1
    </div>
    <div class="list-item">
    Item 2
    </div>
    <div class="list-item">
    Item 3
    </div>
    <div class="list-item">
    Item 4
    </div>
</div>
<div class="list_wrap">
    <div class="list-item">
    Item 5
    </div>
    <div class="list-item">
    Item 6
    </div>
    <div class="list-item">
    Item 7
    </div>
    <div class="list-item">
    Item 8
    </div>
</div>

但是现在我想在同一个项目上添加一个滑动功能，以便我可以为每个项目显示一些选项。为了让你更好地理解这一点，我准备了下面的图像.. enter image description here

我在互联网上搜索了我发现离子框架中的滑动功能但没有拖拽掉落。我找到支持所有触摸事件的hammer.js，但我不知道如何使用锤子在同一元素上实现drag-srop和swipe，而且我不知道同样的东西是否适用于动态元素。请帮忙......