Aidez-moi à passer de prototype à 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); 
} 

Bonjour, je passe du prototype à Jquery et maintenant je n'ai pas réussi à faire la transition et j'ai finalement besoin d'aide. peut-être s'il vous plaît aidez-moi à traduire le prototype js ci-dessus à jquery mettre quelques commentaires pour que je puisse suivre? J'apprécierai vraiment. Oui, le prototype est un peu dur mais jusqu'à ce que je comprenne complètement, il sera difficile de me sortir de la tête.

Answer 1

Comme déjà mentionné, jQueryUI est votre ami. Étant donné le code HTML suivant:

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

Vous pouvez utiliser le jQuery et jQueryUI ci-dessous pour obtenir quelque chose à ce que vous faites.

$(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 
     } 
    }); 
}); 

travail jsFiddle ici: http://jsfiddle.net/2F8YE/

Answer 2

d'abord dans jQuery, vous devez utiliser $ (function() {...}) au lieu de window.onload (jquery commence ici; D)

juste regarder l'échantillon jQueryUI http://jqueryui.com/demos/droppable/