私は使用jQuery Sortable
していますが、うまく機能します。しかし、ここで小さな問題が発生しています。
あるブロックの要素を別のブロックに移動できる 2 つのブロックがありますが、問題は、右側のブロックのすべての要素が左側のブロックに移動され、左側のブロックから要素を移動できないことです。右側のブロックには空きスペースがないため、右側のブロックに移動します。
要素が完全に移動される前のブロック
右側のブロック要素を左に移動した後のブロック 現在、左側のブロックから右側のブロックに要素を移動できません。
空のブロック(2番目の画像の右側のブロック)または他の代替ソリューションに空のスペースを保持する方法はありますか?
ここに私のコードとjsfiddle hereがあります。
<!DOCTYPE HTML PUBLIC>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
body{
margin:10px;
}
table{
width:100%;
}
.gridWrapper{
border-collapse:collapse;
}
.gridWrapper,.gridWrapper tr td.column{
border:2px solid red;
vertical-align:top;
}
.grid{
border-collapse:collapse;
*border-spacing:10px;
}
.grid td{
border:1px dashed black;
white-space:nowrap;
padding:3px 5px;
}
.ui-state-highlight{
height: 1.5em;
line-height: 1.2em;
}
.grid td:first-child{
text-align: right;
font-weight: bold;
}
td.column{
width:50%;
}
</style>
</head>
<body>
<table class="gridWrapper">
<tr>
<td class="column">
<table id="sort1" class="grid" title="Kurt Vonnegut novels">
<tbody>
<tr><td>Name</td><td>Will Smith</td></tr>
<tr><td>Date of Birth</td><td>25/09/1968</td></tr>
<tr><td>Zodiac Sign</td><td>Libra</td></tr>
</tbody>
</table>
<td class="column">
<table id="sort2" class="grid" title="Kurt Vonnegut novels">
<tbody>
<tr><td>Occupation</td><td>Actor,Producer</td></tr>
<tr><td>Place of birth</td><td>Philadelphia</td></tr>
</tbody>
</table>
</td>
</tr>
</table>
<script>
$(".grid tbody").sortable({
connectWith:'.grid tbody',
placeholder: "ui-state-highlight",
dropOnEmpty: true,
helper: function(e, ui) {
ui.children().each(function() {
$(this).width($(this).width());
});
return ui;
},
forceHelperSize: true
}).disableSelection();
</script>
</body>
</html>