Javascript 分拣、拖拽、顺利放下卡片

请帮帮我

我有一组卡片，我正在尝试通过拖放对卡片进行排序。我也在促进卡片的分组。这些卡片除了div中的图像外没有其他内容。为了进行排序，我使用Jquery UI sortable

我面临的问题是，在排序过程中，由于这些卡片被左边的边距重叠：-45px，导致卡片闪烁的排序和卡片掉落在错误的位置。此外，由于每次排序都会导致重新定位卡片，因此转换也不平滑

我已经尝试了助手的克隆功能，这也帮不了我

$(".group .parent").sortable({
        connectWith: ".parent",
        smooth:true,
        revert:100,
        opacity: 0.8,
        helper: 'clone',
        refreshPositions: false,
        containment:'#table_main',
        tolerance: "intersect"
    }).disableSelection();

HTML是

<div class="group">
    <div class="parent">
        <div><p>1Item 1</p></div>
        <div><p>2Item 2</p></div>
        <div><p>3Item 3</p></div>
        <div><p>4Item 4</p></div>
        <div><p>5Item 5</p></div>
        <div><p>6Item 6</p></div>
        <div><p>7Item 7</p></div>
    </div>
</div>

---

谢谢，等待您宝贵的回复。

这就是您要找的吗？不，在您的示例中，当您开始拖动卡片时，它在背景中闪烁。这是我这边的一个主要问题。我正在寻找一个平稳的过渡

.parent{
   display:inline-block;
}
.parent div{
    float:left;
    width: 90px;
    margin-left: -45px;
}
.parent div p{
    height: 95px;
    width: 90px;
    background:#CCC;
    border:solid 1px #999;
}