[英]The table row gets offset when dragging, using JQuery sortable
I have a table that uses border-spacing to separate rows. 我有一个使用边框间距分隔行的表。
When using JQuery sortable - and it works - the row jumps down when beeing moved, can this be fixed? 当使用可排序的JQuery时-它可以工作-蜜蜂移动时该行跳下,可以解决此问题吗?
This code demonstrates: 此代码演示:
$(function() { $("#items").sortable(); $("#items").disableSelection(); });
table { border-spacing: 0 20px; background-color: #cda; } td { width: 170px; border: 2px solid gray; }
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> <table> <tbody id="items"> <tr> <td class="list">1</td> </tr> <tr> <td class="list">2</td> </tr> <tr> <td class="list">3</td> </tr> </tbody> </table>
I found a solution. 我找到了解决方案。 I added a class to the dragged element,
我将一个类添加到拖动的元素中,
.up{
margin-top: -20px;
}
(It seems to correspond to the value of border-spacing
) (这似乎与
border-spacing
的值相对应)
The adding was by making the sortable call like this: 添加是通过如下进行可排序调用:
$(function () {
$("#items").sortable({
placeholder: "highlight",
start: function (event, ui) {
ui.item.toggleClass("up");
},
stop: function (event, ui) {
ui.item.toggleClass("up");
}
});
$("#items").disableSelection();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.