使用原型/lowpro 在屏幕上重新排序项目。 JS 不工作答案

【问题标题】：Using prototype/lowpro to reorder items on screen. JS not working使用原型/lowpro 在屏幕上重新排序项目。 JS 不工作
【发布时间】：2010-09-16 21:45:09
【问题描述】：

在我的 HTML 中包含以下 JS：

document.observe('dom:loaded', function() {
  Event.addBehavior( {
   'a.move-up:click':  function(event) {
        moveUp(this);
        event.stop();

    },
   'a.move-down:click':  function(event) {
        moveDown(this);
        event.stop();
    }
  });
});

function moveUp(element) {

  var questionElement = $(element).up('div.question');
  var preQuestionElement = questionElement.previous('div.question');
  moveElments('up', questionElement , preQuestionElement);
}

function moveDown(element) {
  var questionElement = $(element).up('.question');
  var postQuestionElement = questionElement.next('.question');

  moveElllments('down', questionElement , postQuestionElement);
}

function moveElments(direction, targRow, sibling) {
    var targetParent = targRow.up('div.questions');
    if(direction == 'up'){
      targRow.remove();
      targetParent.insertBefore(targRow, sibling);
    }
    if(direction == 'down'){
      sibling.remove();
      targetParent.insertBefore(sibling, targRow);
    }
}

然后我有一个链接，当单击该链接时，应将问题（包含在 div.question 中）向上移动到父级 (div.questions) 中。

<a class="move-up" href="#" style="">Move Up</a>

但它似乎不起作用。看来Event handler没有看到“click”事件……

该代码有什么问题？谢谢！

【问题讨论】：

moveElllments 中的 moveDown 是错字吗？
是的，这是一个错字。谢谢你。但它仍然不起作用。我正在尝试 Daniel 提出的修复方案，但没有使用 lowpro 的 addBehaviour
丹尼尔，你介意重新发布你的评论吗？我实际上是想给你积分，因为它在没有低专业的情况下解决了我的问题。

标签： javascript events prototypejs lowpro

【解决方案1】：

我不熟悉 lowpro，但这里有一个使用 vanilla Prototype 的解决方案，并使用 observe 附加您的事件侦听器：

document.observe('dom:loaded', function() {
  $$('a.move-up').observe('click', function(event) {
    moveUp(this);
    event.stop();
  });

  $$('a.move-down').observe('click', function(event) {
    moveDown(this);
    event.stop();
  });
});

【讨论】：