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发一些评论，以便我可以关注？我真的很感激。是的，原型是一项艰苦的工作但是直到我完全陷入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/

帮助我从原型转向jquery

2 个答案: