2 
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 に移行していますが、現在移行に失敗しており、最終的に助けが必要です。上記のプロトタイプ js コードを jquery に変換して、フォローできるようにいくつかのコメントを追加してください。本当に感謝します。はい、プロトタイプは少し大変な作業ですが、完全に jquery に頭を悩ませるまでは、その動きを頭から追い出すのは難しいでしょう。

4

2 に答える 2

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/

于 2010-12-15T17:32:17.137 に答える
0

まず、jQuery では、window.onload の代わりに $(function(){...}) を使用する必要があります (jquery はここから始まります;D)

jQueryUI サンプルhttp://jqueryui.com/demos/droppable/を見てください。

于 2010-12-15T16:58:35.340 に答える