我正在制作一个多选列表,您可以在其中选择项目,然后单击“向上”或“向下”按钮,您可以在列表中重新排序这些项目。
我有一个简单的独立示例:
<html>
<head>
<title>Example</title>
<script src="https://www.google.com/jsapi"></script>
<script>
google.load('jquery', '1.4.1');
</script>
</head>
<body>
<select id="selectedDataPoints" multiple="multiple">
<option>Pig</option>
<option>Duck</option>
<option>Dog</option>
<option>Zebra</option>
<option>Snake</option>
<option>Giraffe</option>
<option>Cow</option>
</select>
<input type="button" id="btnReorderUp" value="Up" />
<input type="button" id="btnReorderDown" value="Down" />
</body>
</html>
<script type="text/javascript">
var DataPointSelector = (function() {
var $selectedList = $('#selectedDataPoints');
$('#btnReorderUp').click(function(e) {
moveUp();
e.preventDefault();
});
$('#btnReorderDown').click(function(e) {
moveDown();
e.preventDefault();
});
function moveUp() {
var select = $selectedList[0];
for (var i = 1, n = select.options.length; i < n; i++)
if (select.options[i].selected && !select.options[i - 1].selected)
select.insertBefore(select.options[i], select.options[i - 1]);
}
function moveDown() {
var select = $selectedList[0];
for (var i = select.options.length - 1; i > 0; i--)
if (select.options[i].selected && !select.options[i + 1].selected)
select.insertBefore(select.options[i + 1], select.options[i]);
}
} ());
</script>
但是,在 IE7/8 中,Up/Down 按钮实际上需要 3-8 秒才能生效。第一次单击有时会很快,但之后选择列表需要很长时间才能更新为新位置(特别是如果您选择了几个项目)。
Chrome/FF 中不存在此问题。我不会想到这个简单的重新排序会如此密集!
有没有人有任何信息可以用来帮助我加快 moveUp/moveDown 功能?!