如何防止Bootstrap使拖动行的宽度变化？ [英] How to prevent Bootstrap from making the dragged row change in width?

问题描述

这是Trevor和原作者提供的解决方案。

I would like to have a table which allows me to drag and drop to reorder its rows in it.

Here is the solution offered by Trevor and the original author.

A table and its rows gets changed in width when dragging and dropping to reorder its rows

Here is the jsfiddle demo

http://jsfiddle.net/trevordowdle/2Sg8v/

However, if I add Bootstrap class "table" to the table, the dragged row shrinks. I tried many ways to set the width of the dragged row (the row dynamically created by JQuery UI) and got no success. Here is the jsfiddle demo.

http://jsfiddle.net/mddc/8sRxL/1/

Here is the only change (the table class) after adding Bootstrap css.

<table id="sort" class="grid table" title="Kurt Vonnegut novels">

Any way to fix this?

Though the post's title mentions Bootstrap, it may be just caused by 100% table width. However, I need to have 100% for the table width because of the design that I have no control.

Thanks.

解决方案

Update 2

When setting the widths I find that if you add an extra 16-18 pixels to each column that evens it out so that it does not shrink.

    $helper.children().each(function(index) {
        $(this).width($originals.eq(index).width()+17); // 16 - 18
    });

See Example

FIDDLE

这篇关于如何防止Bootstrap使拖动行的宽度变化？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！