小编Ste*_*007的帖子

我有一个带有向上和向下按钮的值列表。如果我想单击向上按钮，则元素会以列表中的先前值向上移动，然后单击向下按钮，它们会向下移动到列表中的下一项。我的示例代码在这里，

<ul>
  <li> 1 &nbsp;&nbsp;<button class="up">UP</button>&nbsp;&nbsp;<button class="down">DOWN</button></li>
  <li> 2 &nbsp;&nbsp;<button class="up">UP</button>&nbsp;&nbsp;<button class="down">DOWN</button></li>
  <li> 3 &nbsp;&nbsp;<button class="up">UP</button>&nbsp;&nbsp;<button class="down">DOWN</button></li>
  <li> 4 &nbsp;&nbsp;<button class="up">UP</button>&nbsp;&nbsp;<button class="down">DOWN</button></li>
  <li> 5 &nbsp;&nbsp;<button class="up">UP</button>&nbsp;&nbsp;<button class="down">DOWN</button></li>
</ul>

<script type="text/javascript">
function moveUp(element) {
  if(element.previousElementSibling)
    element.parentNode.insertBefore(element, element.previousElementSibling);
}
function moveDown(element) {
  if(element.nextElementSibling)
    element.parentNode.insertBefore(element.nextElementSibling, element);
}
document.querySelector('ul').addEventListener('click', function(e) {
  if(e.target.className === 'down') moveDown(e.target.parentNode);
  else if(e.target.className === 'up') moveUp(e.target.parentNode);
});
    </script>

这是带有要显示的值列表的代码，但我希望以这种格式显示数组值，该格式根据索引执行向上和向下功能。我的数组元素是：

[
    { id: "Racer-101", rank: "1"},
    { id: "Racer-102", rank: "2"},
    { id: "Racer-103", rank: "3"},
    { id: "Racer-104", rank: "4"}, …

我是knockoutjs中的新手,我看到了一个示例,它通过选择选项中索引的下拉值来上下移动数组值.但它的问题是它们不能正确地移动值.更改选择框中的数组位置选项后,将更改..

var viewModel = function() {
  var self = this;

  var Item = function(name, pos) {
    this.name = ko.observable(name);
    this.position = ko.observable(pos);
    var oldPosition = pos;
    this.position.subscribe(function(newValue) {
      self.reposition(this, oldPosition, newValue);
      oldPosition = newValue;
    }, this);
  };

  this.items = [
    new Item("item Three", "3"),
    new Item("item One", "1"),
    new Item("item Two", "2"),
    new Item("item Five", "5"),
    new Item("item Four", "4"),
    new Item("item Six", "6")
  ];


  self.orderedItems = ko.computed(function() {
    return ko.utils.arrayFilter(this.items, function(item) {
      return true;
    }).sort(function(a, b) {
      return a.position() …