ドラッグ中にソート可能な要素を1行に保持する方法

Question

x軸上の親の中で子をソート可能にしたい。それは動作するが、要素の移動中に残りの要素がパディングまたはマージンを変更する、すなわち、アクティブ要素に蛇行する。

<div id='parent'> 
<div class='tagup'>EARTH</div> 
<div class='tagup'>SUN</div> 
<div class='tagup'>MOON</div> 
<div class='tagup'>VENUS</div> 
</div> 

CSS

#parent{ 
    padding:5px 10px; 
    background:lightgreen; 
} 
.tagup{ 
    display:inline-block; 
    background:darkblue; 
    color:white; 
    text-align:center; 
    border-radius:5px; 
    cursor:pointer; 
    padding:1px 5px; 
    margin:3px; 
} 

JS

$('#parent').sortable({ 
axis: "x", 
containment: 'parent', 
tolerance: "pointer", 
}); 

ここでは、ドラッグ中に1つのラインでそれらを保つためにどのようにEXAMPLE

のですか？ g

Answer 1

並べ替え可能な値はcontanerの高さを設定します。タグ付けの高さautoを設定しましょう。

.tagup{ 
    display:inline-block; 
    height:auto !important; //Add this line 
    background:darkblue; 
    color:white; 
    text-align:center; 
    border-radius:5px; 
    cursor:pointer; 
    padding:1px 5px; 
    margin:3px; 
}