Menu
I am using jQuery Ui's Sortable widget to implement drag and drop functionality in table rows. The problem is that if I drag the 2nd and 3rd rows down a little(not enough for the following row to be displaced), the space between the rows increases. Now, if I actually do swap the 2nd row with the 3rd (by dragging the 2nd below the 3rd), a lot of space accumulates between the first and 2nd row. If the above steps are repeated, we can continue to increase space between rows
Initially,
Finally,
The code is as follows:
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.ui.sortable.min.js"></script>
<script>
$(document).ready(function() {
$( "#table tbody " ).sortable({placeholder : 'red',axis:'y',containment:'tbody'});
$( "#table tbody" ).disableSelection();
});
</script>
<style>
.red{
background-color : red;height: 1.5em; line-height: 1.2em;
}
#table{
border-spacing : 2px;
background-color : light gray;
}
#table tr{
background-color : yellow;
}
body{
background-color : gray;
}
</style>
</head>
<body>
<table id="table">
<thead>
</thead>
<tbody>
<tr>
<td>
<label for="name1">Enter name</label>
<input type="text" id="name1"/>
</td>
</tr>
<tr>
<td>
<label for="name2">Enter name</label>
<input type="text" id="name2"/>
</td>
</tr>
<tr>
<td>
<label for="name3">Enter name</label>
<input type="text" id="name2"/>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Its a bad use of tables, but there is some legacy code I have to tolerate
Also, why is the placeholder option not working ?
543
Seems that you are loading a very old set of librarys, if you change your code to this two line the issue is gone.
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
If you want you can narrow jqueryui just to sortable and that is about 38kb
171
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
