프로토 타입에서 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 jquery 위의 프로토 타입 js 코드를 번역 할 수 있도록 내가 따라갈 수 있도록 몇 가지 의견을 넣어 주시겠습니까? 나는 정말로 감사 할 것이다. 예, 프로토 타입은 약간 힘든 일입니다. 그러나 jquery에 완전히 들어가기 전까지는 머리에서 벗어나기가 어려울 것입니다. 대신 창로드의 $ (함수() {...}을)를 사용한다 jQuery를에 우선

Answer 1

보고 이미 언급했듯이, jQueryUI는 당신의 친구입니다.

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

당신은 당신이 무엇을하고 있는지에 가까운 무언가를 얻기 위해 다음과 같은 jQuery를하고 jQueryUI를 사용할 수 있습니다 다음과 같은 HTML을 감안할 때. 여기

$(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와 여기에서 시작; D)

단지 jQueryUI 샘플 http://jqueryui.com/demos/droppable/