html - JQuery Sortable bootstrap table -
i'm trying implement jquery sortable bootstrap 3 table. works fine, when drag row position want it's not under cursor stays pixels @ top, makes hard see dragging.
i'm not sure whether has stylesheet or version of 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> 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> 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> 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 } } }); } });
can ?
Comments
Post a Comment