Question

我正在尝试实现一个JQuery可排序的bootstrap 3表。有用很好，但是当我将行拖到我想要的位置时，实际上并不是这样在光标下它会在顶部保留一些像素，这就是它真的很难看出你在拖拽什么。

我不确定它是否与我的样式表或JQuery版本有关。

HTML

<table class="table table-bordered table-striped" id="sortable">
    <thead>
        <tr>
            <th>
                Title
            </th>
            <th>
                Description
            </th>
        </tr>
    </thead>
    <tbody>
        <tr data-item-id=3 class="item">
            <td>
                The Voynich Manuscript
            </td>
            <td>
                <a class="btn btn-default pull-right" href="/things/3">show</a>
            </td>
        </tr>
        <tr data-item-id=1 class="item">
            <td>
                A Roman Dodecahedra
            </td>
            <td>
                <a class="btn btn-default pull-right" href="/things/1">show</a>
            </td>
        </tr>
        <tr data-item-id=2 class="item">
            <td>
                A Phaistos Disc
            </td>
            <td>
                <a class="btn btn-default pull-right" href="/things/2">show</a>
            </td>
        </tr>
    </tbody>
</table>

JS

 var cells, desired_width, table_width;
 table_width = $('#sortable').width();
 cells = $('.table').find('tr')[0].cells.length;
 desired_width = table_width / cells + 'px';
 $('.table td').css('width', desired_width);
 $('#sortable').sortable({
     axis: 'y',
     items: '.item',
     cursor: 'move',
     tolerance: 'pointer',
     sort: function(e, ui) {
         return ui.item.addClass('active-item-shadow');
     },
     stop: function(e, ui) {
         ui.item.removeClass('active-item-shadow');
         return ui.item.children('td').effect('highlight', {}, 1000);
     },
     update: function(e, ui) {
         var item_id, position;
         item_id = ui.item.data('item-id');
         console.log(item_id);
         position = ui.item.index();
         console.log(position);
         return $.ajax({
             type: 'POST',
             url: '/things/update_row_order',
             dataType: 'json',
             data: {
                 thing: {
                     thing_id: item_id,
                     row_order_position: position
                 }
             }
         });
     }
 });

有人可以帮忙吗？

JQuery可排序引导表

0 个答案: