Jquery拖放开关可拖动元素为新的

我真的很新jquery。我被要求做一些拖放功能。我设法找到了很多能够让我获得简单结果的资源。（http://jsfiddle.net/TgQTP/14/）。Jquery拖放开关可拖动元素为新的

缺少的是我想要的切换功能。例如：将蓝色方块拖到已添加了另一个正方形（X）的'.droppable'上时，我希望蓝色替换X并使X返回到特定位置。 X可以通过动画返回，也可以通过附加它来返回。

我的问题在于，不知道如何制作“开关”。

2012-08-08 FEST

你说你想“让X回到特定的地方”。这是否意味着你想要蓝色始终回到蓝色的原始位置，或者只是回到原来的颜色库？以下是后者的工作方式：http://jsfiddle.net/xWZcj/让我知道你是否在寻找前者。 – 2012-08-08 09:19:02

$（'。ui-draggable'，this）这就是我错过的东西。我总是做$（this）.draggable想着我会到达ui.draggable对象。如果我想要动画，我应该使用.animate还是尝试恢复这个？ – FEST 2012-08-08 10:05:47

可以进行拖放，并在您的jsfiddle使用此开关（http://jsfiddle.net/TgQTP/14/）：

$('.draggable').each(function(index, div) { 

    var scope = $(this).attr('data-scope'); 

    $(div).draggable({ 

     stop: function() { 

      $('.droppable').droppable('option', 'disabled', false); 

     }, 

     helper: 'clone' 

    }); 

}); 

$('.droppable').droppable({  

    drop: function(event, ui) { 

     var x = $(this).find('.draggable'); 

     if (! ($(this).attr('id') === 'bank')) { 

      if (! x.length){ 

       $(this).append(ui.draggable);  

      } 

     } else { 

      $('#bank').append($('.ui-draggable', this)); 

      $(this).append(ui.draggable); 

     }    
    } 

});

完整的jsfiddle：http://jsfiddle.net/xWZcj/

要添加的广场上开关回位动画，试试这个：http://jsfiddle.net/xWZcj/1/

您可以切换出：

$('#bank').append($('.ui-draggable', this).hide().fadeIn(600));

使用jQuery UI提供的各种其他动画（http://docs.jquery.com/UI/Effects）

来源

2012-08-08 23:11:09

Jquery拖放开关可拖动元素为新的

回答

相关问题