使用prototype / lowpro重新排序屏幕上的项目。 JS不工作

时间:2010-09-16 21:45:09

标签: javascript events prototypejs lowpro

我的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.questions)中向上移动一个问题(包含在div.question中)。

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

然而它似乎不起作用。看来事件处理程序没有看到“click”事件...

该代码有什么问题? 谢谢!

1 个答案:

答案 0 :(得分:0)

我不熟悉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();
  });
});