テーブルでソート可能な jQuery UI を使用しようとしていますが、問題が発生しています。行をドロップすると、高さが以前とまったく同じではありません。それは小さくなり、行は何らかの理由でテーブル全体を使い果たしません。
これを防ぐにはどうすればよいですか？テーブルに2行しかない場合は非常に目立ちますが、多くの行が利用可能な場合はほとんど目立ちませんが、それでもこれを制御したいと思います.
編集：
これは、結果テーブルではなく、ソート可能なテーブルで何が起こるかについてです。
どうやらこの問題は Webkit でのみ発生し、Mozilla や IE では発生しないようです。
デモ：
http://jsbin.com/ucopun/66/edit
ここに私のjsコードがあります:
$(document).ready(function() {
//sort
$("#myTable").on('click', '.up, .down', function(event) {
var row = $(this).closest("tr");
if ($(this).is(".up")) {
row.insertBefore(row.prev());
} else {
row.insertAfter(row.next());
}
row.fadeOut();
row.fadeIn();
});
//fix dd width of rows
$(function() {
var fixHelper = function(e, ui) {
ui.children().each(function() {
$(this).width($(this).width());
});
return ui;
};
$("#myTable tbody").sortable({
helper: fixHelper
});
$("#myTable tbody").disableSelection();
});
//buttons
var savebtn = "<div class=\"save\">Save</div>";
var editbtn = "<div class=\"edit\">Edit</div>";
var removebtn = "<div class=\"remove\">Remove</div>";
var upbtn = "<a class=\"up\">up</a><a class=\"down\">down</a>";
$("#target").click(function() {
//add
var speise = $(".addnew").val();
var beschr = $(".addnew2").val();
$('#myTable tr:last').after('<tr class="frst"><td class="content"><span class="speise">' + speise + '</span><span class="beschr">' + beschr + '</span></td><td class="btns">' + removebtn + '</td><td class="btns">' + editbtn + upbtn + '</td></tr>');
});
$("#myTable").on('click', '.remove', function(event) {
$(this).parent().parent().remove();
});
//edit
$("#myTable").on('click', '.edit', function(event) {
var speise = $(this).closest("tr").find(".speise").text();
var beschr = $(this).closest("tr").find(".beschr").text();
$(this).closest("tr").find(".content").html('<input class="sp" value="' + speise + '"/><br><input class="be" value="' + beschr + '"/>');
$(this).parent().html(savebtn);
});
//save
$("#myTable").on('click', '.save', function(event) {
var speise = $(this).closest("tr").find(".sp").val();
var beschr = $(this).closest("tr").find(".be").val();
$(this).closest("tr").find(".content").html('<span class="speise">' + speise + '</span><span class="beschr">' + beschr + '</span>');
$(this).parent().html(editbtn);
});
//result
});
$("button").click(function() {
var data = "";
$("#myTable tr td:first-child").each(function() {
data += "<tr><td>" + $(this).text() + "</td></tr>";
});
$(".result").html(data);
});
HTML
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<table id="myTable">
<tr>
<td class="content">
<span class="speise">SPEISE</span>
<span class="beschr">BESCHREIBUNG</span>
</td>
<td class="btns">
<div class="remove">REMOVE</div></td>
<td class="btns">
<div class="edit">edit</div>
<a class="up">up</a>
<a class="down">down</a>
</td>
</tr>
<tr>
<td class="content">
<span class="speise">SPEISE</span>
<span class="beschr">BESCHREIBUNG2</span>
</td>
<td class="btns">
<div class="remove">REMOVE</div></td>
<td class="btns">
<div class="edit">edit</div>
<a class="up">up</a>
<a class="down">down</a>
</td>
</tr>
</table>
Speise<br>
<input class="addnew" type="text" id="name" />
<br>Beschreibung <br>
<input class="addnew2" type="text" id="name" />
<div id="target">Add</div>
<div id="target2">Add2</div>
<button>Result me</button>
<div><table class="result"></table></div>
<div class="test"></div>
</body>
</html>
CSS
table {
border:solid black 1px;
height:200px;
}
td {
border:solid 1px red;
}
#target {
width:50px;
border:solid red 2px;
}
.remove {
color:red;
font-wieght:bold;
}
.result {
border:solid red 2px;
}
td span, a {
display:block;
}
a {cursor:pointer;}
tr {
cursor:move;
}
.btns {
cursor:auto;
}
また、jQuery UI を使用せずに jQuery のみを使用してドラッグ アンド ドロップの並べ替えを行う簡単な方法があれば、リンクをいただければ幸いです。