jQuery UIでソート可能な使い勝手の問題

Question

私は、カードをソート可能にしたいという素敵なカードスタックを持っています。カードを積み重ねるには、ボトムマージンがマイナスになり、ソートが乱れます。

jsfiddle

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script> 

<ul> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
    <li>Item 5</li> 
    <li>Item 6</li> 
    <li>Item 7</li> 
    <li>Item 8</li> 
</ul> 

<style> 
    ul { 
    list-style-type: none; 
    padding: 0; 
    } 
    li { 
    width: 347px; 
    height: 226px; 
    box-sizing: border-box; 
    padding: 3px 20px 10px 20px; 
    margin-bottom: -120px; 
    border: solid 1px #F00; 
    background-color: #FFF; 
    transform: skewX(-2deg); 
    } 
    li:not(:last-child) { 
    margin-bottom: -191px; 
    } 
</style> 

<script> 
    $(function() { 
    $("ul").sortable({}); 
    }); 
</script> 

私は時間のためにしようとしたが、問題を解決することができませんでしたされています。誰かが考えを持っていますか、多分カードを積み重ねたり、振る舞いを修正するソート可能なイベントを使ったりしていますか？

は非常に

Answer 1

よしありがとう、私はそれを得た：https://jsfiddle.net/vLfumdwb/4/

li { 
    width: 347px; 
    height: 35px; 
} 
li div { 
    width: 100%; 
    height: 226px; 
    ... 
} 

私はJavaScriptで何かを変更するが、異なったカードを引くことができませんでしたトリック（カードは今高さだけ35pxでありませんでした226pxの高さと-191pxの負のマージンを持つカードではなく、226pxの高さの内側のdiv）。