將其拖放，然後將其拖回原始位置

Question

我想獲得關於以下情況的幫助。

我有兩列，一列包含數字，另一列是通過拖放來接收它們。

左欄可拖動，右欄可放下。 我想讓右列可拖動，所以如果用戶改變了主意，他們可以將其拖放到左欄並重新開始。

$('.draggable').draggable({ 
    revert: true 
}); 

$('.droppable').droppable({ 
    drop: function(e, ui) { 
    $(this).html(ui.draggable.html()); 
    $(ui.draggable).html(''); 
    } 
}); 

請參閱的jsfiddle鏈接：Jsfiddle

Answer 1

我會讓你可以傳遞對象啓用拖放功能。通過這種方式，可以很容易地使一個拖動的項目拖動再次和它的源頭可放開等

工作實例：https://jsfiddle.net/Twisty/nuopmqnb/

jQuery的

$(function() { 
    function makeDrag($o) { 
    $o.draggable({ 
     revert: true, 
     stop: function(e, ui) { 
     if (!$(this).find("img").size()) { 
      $(this) 
      .removeClass("draggable") 
      .addClass("droppable") 
      .draggable("destroy"); 
      makeDrop($(this)); 
     } 
     } 
    }); 
    } 

    function makeDrop($o) { 
    $o.droppable({ 
     drop: function(e, ui) { 
     var $img = $("<img>", { 
      src: ui.draggable.find("img").attr("src") 
      }), 
      $target = $(e.target); 
     ui.draggable.html(""); 
     $target.html($img); 
     $target.droppable("destroy"); 
     makeDrag($target); 
     return false; 
     } 
    }); 
    } 

    makeDrag($('.draggable')); 
    makeDrop($('.droppable')); 
});