jQuery UI sıralanabilir kullanılabilirlik sorunları

Question

Kartların sıralanabilir olmasını istediğiniz güzel bir kart destesine sahibim. Kartları istiflemek için, sıralamayı bozan negatif bir alt marjı vardır.

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> 

saatlerce çalışıyor ama sorunu çözmek mümkün değildi edilmiştir. Herhangi bir fikrin var mı, belki kartları farklı bir şekilde istifleme veya davranışı düzeltmek için bir sortable olayı kullanarak?

, size

Answer 1

Tamam çok teşekkür ederim anladım: https://jsfiddle.net/vLfumdwb/4/

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

javascript ile bir şey değişmez ama hile farklı kartlar vermedi çizim (kart artık sadece 35px yüksekliğinde olduğunu 226px yükseklik ve -191px negatif alt kenar boşluğu ile kart yerine 226px yüksekliğinde iç div ile).