Javascript转换,从Prototype到jQuery

时间:2010-04-22 20:43:09

标签: javascript jquery jquery-ui drag-and-drop prototypejs

我想将基于Prototype框架的以下javascript代码更新为jQuery框架:

Event.observe(window, 'load', function() {
  $$('.piece').each(function(item) {
    new Draggable(item, { revert: true } );
  });

  $$('.cell').each(function(item) {
    Droppables.add(item, {
      accept: 'piece',
      onDrop: function(piece, cell) {
        cell.descendants().each(function(item) { item.remove(); } );

        piece.remove();
        piece.setStyle({ 'top': null, 'left': null });
        new Draggable(piece, { revert: true });
        cell.appendChild(piece);
      }
    });
  });
});

脚本的第一部分很容易转换:

$(function() {
  $('.piece').draggable(
    {
      evert: true
    }
  );

  $('.cell').droppable(
    {
      /* But here, it's more difficult. Right? ;)
      ... */
    }
  });
});

你有个主意吗?欢迎任何代码的任何部分。非常感谢。

1 个答案:

答案 0 :(得分:0)

这就是我所拥有的:

jQuery(document).ready(function(){ 
    $('.piece').draggable({
        revert: true
        , scope: 'piece_and_cell'
    });

    $('.cell').droppable({
        drop: function(event, ui) {
            var cell = $(this);
            cell.empty();
            var piece = ui.draggable.detach()
            piece.css({top:null, left: null}).appendTo(cell);
            piece.draggable({
                revert: true
                , scope: 'piece_and_cell'
            })
        }
        , scope: 'piece_and_cell'
    });
});