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拖放開關可拖動元素爲新的

回答

相關問題