javascript - カードの並べ替え、ドラッグ、ドロップをスムーズに

Question

私を助けてください ！！！

カードのグループがあり、ドラッグ アンド ドロップでカードを並べ替えようとしています。また、カードのグループ化も容易にしています。これらのカードは注目していますが、div内の画像です。並べ替えには、Jquery UI sortable を使用しています。

私が直面している問題は、これらのカードが margin-left :-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>

CSSは

.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;
}

ありがとうございます。貴重なご回答をお待ちしております。