jQuery可以在td上排序项目表

Question

我的小提琴：http://jsfiddle.net/Muj6w/

好吧，我需要“拖拉”我桌子上的线，但没有“td”，是的，我桌子上的“跨度”

样品： 我需要将移动范围“value1”移动到列[e，s] [1-3]上的空td（或更改位置，但不分组）。我怎么能这样做？

并且需要从line1移动到line2，但不是line3或line4。 line [x] - ＆gt; line [x + 1] ||线[X-1]

PS：对不起，我的英语很差

小提琴代码：

HTML：

<table class="table table-bordered table-condensed">
<thead>
    <tr>
        <td>somedoid</td>
        <td>e1</td>
        <td>s1</td>
        <td>e2</td>
        <td>s2</td>
        <td>e3</td>
        <td>s3</td>
        <td>sum1</td>
        <td>sum2</td>
        <td>sum3</td>
    </tr>
</thead>
<tbody>
    <!-- LINE 1 -->
    <tr>
        <td rowspan="3">line1</td>
    </tr>
    <tr class="sortable-line">
        <td rowspan="2"><span>value1</span></td>
        <td rowspan="2"><span>value2</span></td>
        <td rowspan="2"><span>value3</span></td>
        <td rowspan="2"><span>value4</span></td>
        <td rowspan="2"><span></span></td>
        <td rowspan="2"><span></span></td>
    </tr>
    <tr>
        <td>sum1</td>
        <td>sum2</td>
        <td>sum3</td>
    </tr>
    <!-- LINE 2 -->
    <tr>
        <td rowspan="3">line2</td>
    </tr>
    <tr class="sortable-line">
        <td rowspan="2"><span>value1</span></td>
        <td rowspan="2"><span>value2</span></td>
        <td rowspan="2"><span>value3</span></td>
        <td rowspan="2"><span>value4</span></td>
        <td rowspan="2"><span>value5</span></td>
        <td rowspan="2"><span>value6</span></td>
    </tr>
    <tr>
        <td>sum1</td>
        <td></td>
        <td>sum3</td>
    </tr>
    <!-- LINE 3 -->
    <tr>
        <td rowspan="3">line3</td>
    </tr>
    <tr class="sortable-line">
        <td rowspan="2"><span></span></td>
        <td rowspan="2"><span></span></td>
        <td rowspan="2"><span>value3</span></td>
        <td rowspan="2"><span>value4</span></td>
        <td rowspan="2"><span></span></td>
        <td rowspan="2"><span></span></td>
    </tr>
    <tr>
        <td>sum1</td>
        <td>sum2</td>
        <td>sum3</td>
    </tr>
    <!-- LINE 4 -->
    <tr>
        <td rowspan="3">line4</td>
    </tr>
    <tr class="sortable-line">
        <td rowspan="2"><span>value1</span></td>
        <td rowspan="2"><span>value2</span></td>
        <td rowspan="2"><span>value3</span></td>
        <td rowspan="2"><span>value4</span></td>
        <td rowspan="2"><span></span></td>
        <td rowspan="2"><span></span></td>
    </tr>
    <tr>
        <td>sum1</td>
        <td>sum2</td>
        <td>sum3</td>
    </tr>
</tbody>

CSS：

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

JS：

$('tr.sortable-line').sortable({
    connectWith: '.sortable-line',
    cursor: 'move',
    forcePlaceholderSize: true,
    items: 'span'
});