jQuery draggable clone with y axis restriction

Question

If I have this markup:

<table id="sometable">
   <tr>
    <td class="x"><span>111</span></td>
    <td>aaa</td>
   </tr>
   <tr>
    <td class="x"><span>222</span></td>
    <td>bbb</td>
   </tr>    
</table>

And this jQuery code:

$(".x span").draggable({ helper: 'clone', axis: 'y'});

When dragging the first column the cloned span is snapping to the second column rather than the first column. If I try to drag the table cell rather than the span inside it snaps outside of the table. If I remove axis:'y' is works as expected except I no longer have the Y axis restriction that I would like. Any ideas? Thanks.

Answer 1

You need to specify a containment & snap.

$(".x span").draggable({ 
    snap: '.x', 
    snapMode: 'inner', 
    containment: '#sometable', 
    helper: 'clone', 
    axis: 'y'
});