Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
    <script src="http://code.jquery.com/jquery-2.1.0.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var $1_10_4 = $.noConflict(true);
    </script>
​
    <script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var $1_8_17 = $.noConflict(true);
    </script>
<h1>JQ 2.1, UI 1.10.4</h1>
<table>
    <tbody class="table1">
    <tr><td>First</td><td class="hidden">&nbsp;</td><td>Second</td><td>Third</td></tr>
    <tr><td>First</td><td class="hidden">&nbsp;</td><td>Second</td><td>Third</td></tr>
    <tr><td>First</td><td class="hidden">&nbsp;</td><td>Second</td><td>Third</td></tr>
    <tr><td>First</td><td class="hidden">&nbsp;</td><td>Second</td><td>Third</td></tr>
    <tr><td>First</td><td class="hidden">&nbsp;</td><td>Second</td><td>Third</td></tr>
    <tr><td>First</td><td class="hidden">&nbsp;</td><td>Second</td><td>Third</td></tr>
    <tr><td>First</td><td class="hidden">&nbsp;</td><td>Second</td><td>Third</td></tr>
    <tr><td>First</td><td class="hidden">&nbsp;</td><td>Second</td><td>Third</td></tr>
    <tr><td>First</td><td class="hidden">&nbsp;</td><td>Second</td><td>Third</td></tr>
    <tr><td>First</td><td class="hidden">&nbsp;</td><td>Second</td><td>Third</td></tr>
    </tbody>
</table>
<h1>JQ 1.7.1, UI 1.8.17</h1>
<table>
    <tbody class="table2">
    <tr><td>First</td><td class="hidden">&nbsp;</td><td>Second</td><td>Third</td></tr>
    <tr><td>First</td><td class="hidden">&nbsp;</td><td>Second</td><td>Third</td></tr>
    <tr><td>First</td><td class="hidden">&nbsp;</td><td>Second</td><td>Third</td></tr>
    <tr><td>First</td><td class="hidden">&nbsp;</td><td>Second</td><td>Third</td></tr>
    <tr><td>First</td><td class="hidden">&nbsp;</td><td>Second</td><td>Third</td></tr>
    <tr><td>First</td><td class="hidden">&nbsp;</td><td>Second</td><td>Third</td></tr>
    <tr><td>First</td><td class="hidden">&nbsp;</td><td>Second</td><td>Third</td></tr>
    <tr><td>First</td><td class="hidden">&nbsp;</td><td>Second</td><td>Third</td></tr>
    <tr><td>First</td><td class="hidden">&nbsp;</td><td>Second</td><td>Third</td></tr>
    <tr><td>First</td><td class="hidden">&nbsp;</td><td>Second</td><td>Third</td></tr>
    </tbody>
</table>
​
 
table {
    width: 100%;
    margin: 20px;
    border: 1px solid red;
}
.hidden {
  display: none;
}
 
        $1_10_4(document).ready(function() {
            $1_10_4(".table1").sortable({
                helper: function(e, tr) {
                    var $originals = tr.children();
                    var $helper = tr.clone();
                    $helper.children().each(function(index)
                    {
                        // Set helper cell sizes to match the original sizes
                        $1_10_4(this).width($originals.eq(index).width());
                    });
                    return $helper;
                }
            });
        });
​
        $1_8_17(document).ready(function() {
            $1_8_17(".table2").sortable({
                helper: function(e, tr) {
                    var $originals = tr.children();
                    var $helper = tr.clone();
                    $helper.children().each(function(index)
                    {
                        // Set helper cell sizes to match the original sizes
                        $1_8_17(this).width($originals.eq(index).width());
                    });
                    return $helper;
                }
            });
        });
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers