在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 ...我沒有檢查它，我害怕。