网格结构中的项目，项目之间有箭头

Question

我正在尝试通过拖放操作来制作网格，类似于Muuri（https://haltu.github.io/muuri/），Draggable（https://shopify.github.io/draggable/）以及许多其他对象所提供的网格。

我的问题是我想要网格项目之间的边缘或箭头。如果我不是使用网格而是使用工具来绘制网络图（例如http://js.cytoscape.org/），就可以实现此目的，但是我不希望项目在何处拥有太大的自由度。我只想要一个简单的4列，其中包含相同大小的项目。

这如何完成？是否可以仅使用Muuri，然后使用position: absolute在项目顶部添加元素以反映项目之间的箭头？

Answer 1

我认为position:absolute有用。

我刚刚在muuri演示中添加了“ <”和“>”。使它们根据卡的绝对位置（可拖动的物品）

这是添加的CSS

.card-title::before {
    content: ">";
    position: absolute;
    right: -10px;
    font-size: 10px;
}

.card-title::after {
    content: "<";
    position: absolute;
    left: -10px;
    font-size: 10px;
}

.card-title {
    position: relative;
}