Help me move from prototype to 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);
}

Hi, I'm moving from prototype to Jquery and right now I've being unsuccessfuly able to do the transition and finally need some help. can some pne please help me to translate the above prototype js code to jquery put some comments to it so I can follow? I will really appreciate. Yes, prototype is a bit hard work but until I get my head into jquery completely it will be hard to get that move out of my head.

http://jqueryui.com/demos/droppable/ and http://jqueryui.com/demos/draggable/ — Eric Fortis, Dec 15 '10 at 16:59
it would be great if there were a converter of some sort for this kind of stuff... Google is filled with similar questions. — Saul Dolgin, Dec 15 '10 at 17:03
Besides the online docs, a good jquery book you could recommend, I did a search already and there's quite a few, just want to hear other opinions, again I thank you so much for any response. — eleon, Dec 15 '10 at 21:16

score 1 · Accepted Answer · answered Dec 15 '10 at 17:32

As already mentioned, jQueryUI is your friend. Given the following HTML:

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

You can use the following jQuery and jQueryUI to get something close to what you are doing.

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

Working jsFiddle here: http://jsfiddle.net/2F8YE/

I don't think I'm gonna miss prototype, am I? – eleon Dec 15 '10 at 20:57 — eleon, Dec 15 '10 at 20:57

score 0 · Answer 2 · answered Dec 15 '10 at 16:58

0

first of all in jQuery you should use $(function(){...}) instead of window.onload (jquery starts here ;D)

just look at the jQueryUI sample http://jqueryui.com/demos/droppable/

answered Dec 15 '10 at 16:58

Andrea Balducci

2,834
1
21
18

window.onload shouldn't be used in Prototype either, use document.observe. http://www.prototypejs.org/api/document/observe – rlovtang Dec 15 '10 at 19:53

Help me move from prototype to jquery

2 Answers2