在MultiSelect中排序选项时，滚动条不会移动

Question

我有一个多选框，其右边有两个按钮，用于在列表中上下选择一个选项。这工作正常，但是如果我将选项向上或向下移动到多选的顶部或底部边界，则滚动条将不会生效并相应地移动。有什么建议么？

的JavaScript：

$(document).ready(function() { 
    $("#mup")[0].attachEvent("onclick", moveUpItem); 
    $("#mdown")[0].attachEvent("onclick", moveDownItem); 
}); 

function moveUpItem() { 
    $('#list option:selected').each(function() { 
    $(this).insertBefore($(this).prev()); 
    }); 
} 

function moveDownItem() { 
    $('#list option:selected').each(function() { 
    $(this).insertAfter($(this).next()); 
    }); 
} 

//Holding down the Up/Down buttons 
$(document).ready(function() { 
    var timer; 
    $("#mup, #mdown").on('mousedown', function() { 
    if (this.id === 'mup') { 
     timer = setInterval(moveUpItem, 250); 
    } else { 
     timer = setInterval(moveDownItem, 250); 
    } 
    }).on('mouseup', function() { 
    clearInterval(timer); 
    }); 
}); 

$(document).ready(function() { 
    $("#submit").click(function() { 
    $("#list").each(function() { 
     $("#list option").attr("selected","selected"); 
    }); 
    $("#detColumnSortorder").submit; 
    }); 
}); 

HTML：

<table> 
    <tr> 
    <td align="center"> 
     <select id="list" name="fieldNames" size="15" multiple="multiple" style="width: 250px;"> 
     <c:forEach var="field" items="${detFields}"> 
      <option value="${field.fieldName}">${field.displayName}</option> 
     </c:forEach> 
     </select> 
    </td> 
    <td> 
     <button id="mup"> 
     <img src="../images/button_up.gif" alt="Hold to move up faster."/> 
     </button>&nbsp;&nbsp;&nbsp; 
    </td> 
    <td> 
     <button id="mdown"> 
     <img src="../images/button_down.gif" alt="Hold to move down faster."/> 
     </button> 
    </td> 
    </tr> 
    <tr> 
    <td style="text-align: center;"> 
     <input name="action" id="submit" type="submit" value="Submit"/> 
     <input name="action" type="submit" value="Cancel"/> 
    </td> 
    </tr> 
</table> 

Answer 1

哇，这很有趣。看起来Chrome/WebKit在选择中处理选项移动时会出现一些错误。我不完全确定目前的行为是什么。有时它会移动，有时却不会。

所以，我想，简单...我只是编码一个快速的解决方法。原来，这并不容易。 WebKit的不提供的JavaScript访问一些信息，如选择高度等

因此，相当多的解决方法后，我有一个似乎工作黑客攻击：

http://jsfiddle.net/jtbowden/7NEqk/

以日期什么是值得的。基本上，代码跟踪选择框可见窗口内的选定项目。如果上面再加可见窗口上方，向上等

有两点要注意：

1. 您需要通过您所选择的选项反向重复，当你向下移动.get().reverse()，否则，如果您有相邻的选定项目，您只需将它们交换位置，而不是向下移动。 （1低于2，则2低于1）。
2. 如果浏览器没有返回选项元素的高度，我假设高度为17。这是我最好的猜测，但你可以调整它。此外，这意味着你的选择不能是不同的高度。无论如何，我认为这在WebKit中是不可能的。
3. 在我移动所选项目之前，我检查它是否与其交换的项目被选中。如果是这样，我不做交换。这样可以防止选择在我们到达选择的底部或顶部时进行交换，无法交换。这与我在附注＃1中所说的相似，但情况稍有不同。
4. 我假设所有选择都在选择框内。它仍然有效，如果他们不是，但它可能有不同的处理，取决于你想要什么。
5. 我把return false;放在mousedown处理程序中。这与event.preventDefault()等相同。它使按钮不会从选择中窃取焦点，在Chrome中，使选定的选项变为灰色，而不是正常的蓝色。

当然，在说完所有这些之后，首先可能有更好的方法来管理这个选择系统......但是，我把它作为一种挑战让它按照我认为的方式工作应该。

P.S.谁知道IE ...我没有检查它，我害怕。