帮助我从原型转向 jquery

发布于 2024-10-07 23:01:41 字数 910 浏览 7 评论 0原文

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 之前，很难将这一举动从我的脑海中抹去。

原文

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

寄意 2024-10-14 23:01:41

正如已经提到的，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/

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/

回复收藏 0 原文