帮助我从原型转移到 jquery

Question

window.onload = function() {
   $A($('draggables').getElementsByTagName('p')).each(
      function(item) {
         new Draggable(
            item,
            {
               revert: true
            }
         );
      }
   );

   Droppables.add(
     'droparea0',
     {
        hoverclass: 'hoverActive',
        onDrop: moveItem
     }
  );
   // Set drop area by default  non cleared.
   $('droparea0').cleared = false;
}

function moveItem( draggable,droparea){
    $(droparea).highlight({startcolor: '#999999', endcolor: '#f3f0ca' });
    if (!droparea.cleared) {
        droparea.innerHTML = '';
        droparea.cleared = true;
    }
    draggable.parentNode.removeChild(draggable);
    droparea.appendChild(draggable);
}

嗨，我正在从原型迁移到 Jquery，现在我无法成功地进行转换，最后需要一些帮助。可以请一些 pne 帮我将上面的原型 js 代码翻译成 jquery 放一些 cmets 以便我可以跟随吗？我会很感激的。是的，原型工作有点辛苦，但在我完全进入 jquery 之前，我很难忘记这一点。

Answer 1

如前所述，jQueryUI 是您的朋友。给定以下 HTML：

<div class='draggables'>
    <p>Drag1</p>
    <p>Drag2</p>
    <p>Drag3</p>
</div>
<div id='droparea0'>Drop Zone</div>

您可以使用以下 jQuery 和 jQueryUI 来获得接近您正在做的事情。

$(document).ready(function() {
    $('.draggables p').draggable();
    $('#droparea0').droppable({
        drop: function(event, ui) {
            ui.draggable.detach();                        // detach the dragged element from the DOM
            $(this).css({'background-color': '#999999'})  // start colour for drop area
                .animate({'background-color': '#f3f0ca'}) // animate to final colour
                .empty()                                  // clear the contents of the dropzone
                .append(ui.draggable);                    // append the dragged element
            ui.draggable.css({top: 0, left: 0});          // reset top/left since it was changed during dragging
        }
    });
});

在这里工作 jsFiddle：http://jsfiddle.net/2F8YE/

Answer 2

首先在 jQuery 中你应该使用 $(function(){...}) 而不是 window.onload (jquery 从这里开始 ;D)

看看jQueryUI示例http://jqueryui.com/demos/droppable/