Question

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

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/

把它拿走它的价值。基本上，代码跟踪选择框的可见窗口内的所选项目。如果顶部高于可见窗口，则向上移动等等。

几点说明：

当您向下移动.get().reverse()时，您需要反向遍历所选的选项，否则，如果您有相邻的选定项目，您只需让它们交换位置，而不是向下移动。（1移动到2以下，然后2移动到1以下。
如果浏览器没有返回option元素的高度，我假设高度为17。这是我最好的猜测，但你可以调整它。此外，这意味着您的选择不能是不同的高度。我认为无论如何都不可能在WebKit中使用。
在移动所选项目之前，我会检查是否已选择与其交换的项目。如果是，我不做交换。当我们到达select的底部或顶部时，这可以防止选择交换，其中没有任何东西可以交换。它类似于我在注释＃1中所说的，但情况略有不同。
我假设选择都适合选择框。如果它们不存在，它仍然可以工作，但根据你的需要，可能会有不同的处理方式。
我将return false;放在mousedown处理程序中。这与event.preventDefault()等相同。它使按钮不会从选择中窃取焦点，在Chrome中，选中的选项会变为灰色，而不是正常的蓝色。

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

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

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

1 个答案: